External Tooltip plug-in on Jqgrid

Question

Currently i am not using any other plug in for tool tip on mouse hover of grid row. I am using

$(\"#list\").setCell(rowid,\'Name\',\'\',\'\',{\'title\':\'my         


        

Answer 1

Because in the next version of jQuery UI will be included Tooltip (see demo) I recommend you better to download it now from github and a little play with it.

I prepared the demo which change the tooltip for the second column of the grid and use HTML contain with custom class (I use in demo standard ui-state-highlight class) and custom animation effect (slideUp/slideDown). So you will see about following

I hope the demo will help you to implement your requirements to custom tooltips.

Answer 2

It is also possible to use another approach. As many "fancy" tooltips are based on class definitions and jquery, you could load the tooltip related class on loadcomplete, e.g.:

$(this).find("td").addClass('gridtip');

I have used a very small and effective tooltip from Alen Gracalic which I call on hover event, like this:

jQuery("#competencegrid").live('hover',function(e){
   gridtip();
});

Additionally, I make sure to remove all previous titles so that the browsers built-in tool-tip function does not show up. This is also done in after loadcomplete:

$('[title]').each(function(){
    $this = $(this);
    if($this.attr('title').length>1){
        $.data(this, 'title', $this.attr('title'));
    }
    $this.removeAttr('title');
}); 

(In the original code from Alen Gracalic, the title attribute is removed while showing the tooltip and then restored. This method does not interact very well with jqgrid. Therefore it is better to remove it completely and rely on jquery data.)

The check on title length above is a specific need I have in my application and can be disregarded.

Finally, when loading the tooltip in the javaclass, I am referring to the jquery data rather than the title attribute (as that one now is empty).

this.gridtip = function(){
    xOffset = 15;
    yOffset = 20;
    $(".gridtip").hover(function(e){
        this.t = $.data(this, 'title');
        if(this.t){
            $("body").append("<p id='gridtip'>"+ this.t +"</p>");
            $("#gridtip")
               .css("top",(e.pageY - xOffset) + "px")
               .css("left",(e.pageX + yOffset) + "px")
               .fadeIn("fast");
         }
     },
     function(){
         $("#gridtip").remove();
     });
     $(".gridtip").mousemove(function(e){
         $("#gridtip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
     });
};

Lastely, but not necessary - this is how my .css class looks like:

#gridtip{
    position:absolute;
    border:4px solid #adadad;
    background:#fefefe;
    -moz-border-radius: 5px;
    padding:4px 5px;
    color:#666;
    display:none;
    font-size:14px;
    font-family:verdana;
    text-align:left;
    z-index:50;
    filter: alpha(opacity=100);
    opacity:0.85;
}

In my application, I am not using the main fields text to display as tool-tip. Instead I am replacing the title contents by text from a hidden column, before loading it into jquery data. The procedure to do it looks something like this:

var numberOfRecords = $("#competencegrid").getGridParam("records");
for(i=1;i<=numberOfRecords;i++){
    var rowid = jQuery('#competencegrid tr:eq('+i+')').attr('id');
    var description = $("#competencegrid").jqGrid("getCell",rowid,"competenceDescription");
    if(description.length>0){
        $("#competencegrid").jqGrid('setCell', rowid, "competenceName", '','',{'title':description});
    }
}