I want to have a toop tip on my JQuery Grid and i tried the method you have described but it does not work for me.

I want to add a toop tip which contrains both some text and image or screen shot. Please help me.

Thanks,

Vivek

Yoou are awesome. It works. It helped me so much.

Thank you very much.

Best Regards,

Candra

I try answering to your 2 questions:

1/ How to show the tooltip image on "Tax" column (and take the content from "Inv No" Column) ?

In your example, You can do that:
 - After the line

 you add this line:
  

 - and you replace the line
    

by this one:
    

Now the tooltip image will show on "Tax" column and the image tooltip is build from "Inv No" column.
    
 
2/ How to show the tooltip image where the basename of image file is based on content from "ID of row" ?

In this Jqgrid example, the "id" of row is localized in the html code "<tr id="<content ID row>" ... >".
So you need to get the content of the attribute of "id" from "<tr...>".
To do this:

- after the line in your example

you add this line:
 

- and you replace this line:
       

by this one:
        

 Hope this will help.

 
 Best regards
 Phil

You gave an example that "inv no" column content is the basename of an image called "<content>.jpg" file.
So, the content "1″ will show in a tooltip the "1.jpg image", "2″ shows in a tooltip the "2.jpg" image and so on…

How if I want to have a thumbnail based on primary ID of a row?

for example a row with primary ID = xxx will show in a tooltip the "xxx.jpg image" and so on...

Best Regards,

Candra

Thank you for your guide to jquery qtip. I was success to follow your step but I got problem when I want to change thumbnail tooltip when the cursor is on "Tax" column (fifth column).

I have changed the code to:

var col1= $(this).find("td:eq(4)"); // Fifth column Tax

and the image did not show.

Could you help me solve this problem, please? Thank you

Best Regards,

Candra

I used an extension called jquery.qtip plugin to do this in my application.
And it works well with Firefox and IE.
To see the plugin for dynamically loaded thumbnail tooltip, see this example here:

http://craigsworks.com/project...../thumbnail

You can apply the same way in Jqgrid.
To see an example, take the "JSON Data" sample in "Loading data section" section of jqgrid demo.
You want to show a thumbnail tooltip when the cursor is on "Inv No" column.
You define that "inv no" column content is the basename of an image called "<content>.jpg" file.
So, the content "1″ will show in a tooltip the "1.jpg image", "2″ shows in a tooltip the "2.jpg" image and so on…
To do this, on the server side, make a folder "images" containing all the image files 1.jpg to 13.jpg.

In jqgrid, to link  the column "Inv No" content with a thumbnail tooltip, insert the code (in jsonex.js) after ColModel, line 14 with the
"loadComplete" event handle like this:

        loadComplete : function() {
            $("#list2 tr").each(function(){
                    var col1= $(this).find("td:eq(0)"); // First column Inv No
                    var thumbnail_url="images/"+$(col1).html()+".jpg"; // Build image link
                    $(col1).removeAttr("title"); // Remove old title
                    var image='<img src="'+thumbnail_url+'" alt="Chargement imagette…" width=100 height=100 />';
                    $(col1).qtip({
                                 content: image,
                                 position: {
                                    corner: {
                                       tooltip: 'bottomMiddle',
                                       target: 'topMiddle'
                                    }
                                 },
                                 style: {
                                    tip: true, // Give it a speech bubble tip with automatic corner detection
                                    name: 'blue'
                                 }
                    });
                });

               }, // loadComplete

You have to download the jquery.qtip extension at:
http://bazaar.launchpad.net/~c...../1.0/files
Note: you need this special version because it fixes a bug in the ajax content download
(For more explanation: http://craigsworks.com/project.....ax-and-net )
Put the downloaded version in a folder js/jquery.qtip
                              
And declare the jquery.qtip extension in the head of (jqgrid.html) in the javascript section like this:
  <script src="js/jquery.qtip/jquery.qtip-1.0.min.js" type="text/javascript"></script>

To summerize, if your Jqgrid_demoXX is installed on your hard disk on <your path>, the new folders were here:

<your path>Jqgrid_demo36/images

<your path>Jqgrid_demo36/js/jquery.tip

Two files to change: <your path>Jqgrid_demo36/jqgrid.html

                                <your path>Jqgrid_demo36/jsonex.js

Hope this will help.

I have tried to use tooltip above and did not success, does anybody can guide me with a working sample tumbnail image hover pease?I have a project with a lot of goods and i need tumbnail images to make it easy.

Best regards,

Candra

To implement the behavior which you need you have to bind all <td> elements (grid cells) with mouseover and mouseout functions which will be display the custom tooltips with images. You can do such binding inside of loadComplete event handle.

To make your implementation easy you can try to use some existing ToolTip plugin like http://bassistance.de/jquery-p.....n-tooltip/, http://plugins.learningjquery......l and so on.

Best regards
Oleg 

I played with the setCell function and assigned image src directory to 'title'. The tooltip displayed, but just the string of image src.

My question is how to add the actual image in the tooltip?

setCell(rowid, 'colName', '','',{'title':"<img sr='/images/picture_big.jpg'>"})

Thanks very much.