web2py[:]


If you benefit from web2py hope you feel encouraged to pay it forward by contributing back to society in whatever form you choose!

Auto Tooltip in Forms
Recipe by Carlos Costa (yamandu) on 2010-07-27 in View

Shows tooltips in forms created via CRUD or SQLFORM with the field´s comment attribute.

First you have to fill the comment attribute in the field definition you want the tooltip to appear. Example: db.define_table('board', Field('message',comment='Let your message here.'))

If you do only this, the tip will appear on the right side of field when the form is genearated via CRUD or SQLFORM. And remember if you want to put html code in comment you should use HELPERS to get it rendered properly.

Example: db.define_table('recados', Field('mensagem',comment=SPAN('Let here your ', B('message')))

Now the fun part!

You will need a jquery plugin to show the tip so you may google for it and pick one. Or you can use this http://jquery.bassistance.de/tooltip/jquery.tooltip.zip See it what it looks like here http://jquery.bassistance.de/tooltip/demo/

Extract jquery.tooltip.min.js and jquery.tooltip.css to static folder. Edit web2py_ajax.html and include the call for these files. Something like this:

{{
response.files.insert(0,URL(r=request,c='static',f='jquery.js'))
response.files.insert(1,URL(r=request,c='static',f='calendar.css'))
response.files.insert(2,URL(r=request,c='static',f='calendar.js'))
response.files.insert(3,URL(r=request,c='static',f='jquery.tooltip.min.js'))
response.files.insert(3,URL(r=request,c='static',f='jquery.tooltip.css'))
.......

Now you have this a script on every page you want tooltips:

<script type="text/javascript">
       $(function() {
               $(".w2p_fw").each(function (){                    //iterates over all form widgets
                       $(this).attr('title',$(this).next().html());      // set title for the widget taken from the comment column
                       $(this).next().html('');                             // clear the comment
                       $(this).tooltip();                                    // create the tooltip with title attribute set
               });
       });
</script>

Done! Comment column will be converted into nice tooltips.

Note: you may include this script in web2py_ajax.html or layout.html to reuse the code. Or you may put this code in another file and include it when needed, maybe this is the better way.

tooltip jquery comment widget automatic

Related slices

Comments (5)

  • Login to post



  • 0
    aliz0611 8 years ago

    I've hacked kmouts's solution to work with bootstrap 3.

    {{extend 'layout.html'}}
<script type="text/javascript">
    $(function() {
        $('[data-toggle="tooltip"]').tooltip();
        $("td.w2p_fc").each(function (){
                	var comment = $(this).html();
    	            if (comment){
    	            	$(this).html('<div class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="right"></div>');
    	                $(this).children('div').attr('title',comment);
                    }
                });
           });
</script>

  • 0
    javi 10 years ago

    Great tip,  but for me the comment of kmouts is a nice solution, i hacked it to make it appear the help icon in the same col of label and aligned to right:

     

    <script type="text/javascript">
    $(function() {
        $("td.w2p_fc").each(function() {
            var comment = $(this).html();
            var trl = this.parentNode.firstChild;
            if (comment) {
                var text = $(trl).html;
                $(this).html('');
                $(trl).append('&nbsp;<i class="icon info icon-info-sign pull-right"></i>');
                $(trl).children('i').attr('title', comment);
                $(trl).children('i').tooltip({
                    placement : 'top',
                    html : true,
                    trigger : 'click'
                });
            }
        });
    });
</script>

  • 1
    kmouts 11 years ago

    Great tip!

     

    This is how I manipulated it to use bootstrap help icon and its css:

     

    $(function() {
       	   $("td.w2p_fc").each(function (){
            	var comment = $(this).html();
	            if (comment){
	            	$(this).html('<div><i class="icon info icon-info-sign"></i></div>'); 
	                $(this).children('div').attr('title',comment);     
	                $(this).children('div').tooltip({ placement : 'right',
	                						html : true,
	               							trigger : 'click' });
                }
            });
       });

  • 0
    villas 14 years ago
    Does this work with custom forms? I bave tried it but cannot get it to work. I guess I am not sure how to tell the function to display the tooltip for an input element. Here is a snippet of my view. (ignore the label stuff as it was another approach I was testing) {{=form.custom.begin}}

    Edit Meeting

    {{form.element('input',_name='name')['_size']=50}}
    Meeting Name:{{=form.custom.widget.name}}
    Password: {{=form.custom.widget.password}} {{=form.custom.label['password']}}
    Status: {{=form.custom.widget.status}} {{=form.custom.label['status']}}
     

  • 0
    villas 14 years ago
    In fact I cannot get it to work with a basic SQLForm. Has anyone gotten this slice to work? Any suggestion are appreciated.
Hosting graciously provided by:
Python Anywhere