2

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 custom tooltip on cell'});

Where the Name is the column name where the tool tip will be set and rowid identify the row. For more information read this answer including the references.

Is there any external plug in to achieve the same in better UI effect. This tool tip does not seems to be good enough to fulfill my requirement

RPB
  • 16,006
  • 16
  • 55
  • 79
  • Could you append your question with the requirements? Which UI effect you need. – Oleg Jan 11 '11 at 11:25
  • Actually in tool tip if content is more then i am not able to format it so for that i need another tool tip which can be formatted well. – RPB Jan 11 '11 at 12:19

2 Answers2

3

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 alt text

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

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • I am getting the tool tip but if data is more in tool tip then scroll bar comes and when i try to focus on the tool tip i am loosing the tool tip itself, How do i get focus on this tool tip which u have suggested – RPB Jan 21 '11 at 06:54
  • @Rinkalkumar: Do you try to insert `
    ` in the tooltip text? Without having full working example which reproduces the problem I can't help you much?     – Oleg Jan 21 '11 at 08:39
  • Ya i have included '/n' and '
    ' but i have to do it manually is there any kind of auto format kind option it will be great if we have any kind of option for that.     – RPB Jan 23 '11 at 07:45
  • @Rinkalkumar: It seems for me as pure HTML formatting problem. You can use CSS style `white-space: normal` for example. If you continue to have a problem, it would be better to post full working example which can be used to reproduce the problem. It will make easier to help you. – Oleg Jan 23 '11 at 08:12
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});
    }
}
Svante Strandberg
  • 21
  • 3