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

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("
"+ this.t +"
");
            $("#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});
    }
}