Jqgrid external tooltip plugin

Question

Currently, I do not use any other plug-ins for tool tips when hovering over a grid line. I use

$("#list").setCell(rowid,'Name','','',{'title':'my custom tooltip on cell'});

Where Nameis the name of the column where the tooltip will be set, and rowididentify the row. For more information, read this answer, including links.

Is there any external plug-in to achieve the same effect in the improved user interface. This tool tip does not seem good enough to fulfill my requirement.

Answer 1

jQuery UI Tooltip (. demo) github .

, HTML, ( ui-state-highlight) (slideUp/slideDown). ,

, .

Answer 2

. "" jquery, , , loadcomplete, :

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

Alen Gracalic , :

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

, , . :

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

( Alen Gracalic title , . jqgrid, jquery.)

- , , .

, javaclass jquery, title ( ).

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");
     });
};

, - .css:

#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;
}

. , jquery. :

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});
    }
}