Tooltip autoHide Not Working as Expected

[JustintkwParticipant]

I have tooltip set up in the following codeset. The tooltip appears as expected. However, the autoHide is not working: As long as the mouse is on top of a row (no movement of the mouse, hands-off), the tooltip does not disappear. . .

            $("#jqxGrid_StdInCS").jqxGrid(
             {
                 source: dataAdapter,
                 theme: 'classic',
                 width: 600,
                 autoheight: false,
                 height: 385,
                 pageSize: 10,
                 pageable: true,
                 sortable: true,
                 filterable: false,
                 editable: true,
                 // trigger cell hover.
                 cellhover: function (element, pageX, pageY)
                 {
                     var cell = $('#jqxGrid_StdInCS').jqxGrid('getcellatposition', pageX, pageY);
                     if (cell.column == "FullName") {
                        var cellValue = cell.value;
                        var rowBoundIndex = cell.row;
                        var rowdata = $('#jqxGrid_StdInCS').jqxGrid('getrowdata', rowBoundIndex);
                        var StdRID = rowdata["StdRID"];
                        var StdAppRID = rowdata["StdAppRID"];
                        var StdCSRID = rowdata["StdCSRID"];
                        var CSRID = rowdata["SessionRID"];
                        textstr = "IT info: StdRID=" + StdRID + "; StdAppRID=" + StdAppRID + ";<br />StdCSRID=" + StdCSRID + "; CSRID=" + CSRID + "."
                        tooltipContent = "<div style='font-size:0.8em;'>" + textstr + "</div>";
                        // update tooltip.
                        $("#jqxGrid_StdInCS").jqxTooltip({ content: tooltipContent, autoHide: true, autoHideDelay: 1000 });
                        // open tooltip.
                        $("#jqxGrid_StdInCS").jqxTooltip('open', pageX + 5, pageY + 5);
                    } else {
                         $("#jqxGrid_StdInCS").jqxTooltip('close');
                    }
                 },
                 editmode: 'selectedcell',
                 selectionmode: 'singlecell',  //none, singlecell, singlerow, multiplerows, multiplerowsextended, multiplecells, multiplecellsadvanced, checkbox
                 showtoolbar: true,
                 toolbarheight: 25,
                 rendertoolbar: toolbarfunc,  //End render footer bar
                 columns: [
                    {
                        text: 'Name', dataField: 'FullName', columntype: 'textbox', editable: false, width: 325,
                        cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                            return '<div class="griddiv">' + value + '<div>';
                        }
                    }
                 ]
        }); 

Not sure what I am missing. . .

[JustintkwParticipant]

Further information: The code above typically works for a little while. It stops working if I move the mouse from one row to the next, usually stops working by about the 6th row. At that point, if I move the mouse off the grid entirely, and then move the mouse back onto the grid, then it works again – for a while. I am using IE-11. . .

[Peter StoevKeymaster]

Hi Justintkw,

I would suggest you do not try to re-create your tooltip each time you move the mouse. This is why you have a problem here. The autoHide can’t work because you create a new tooltip instance each time the mouse is moved.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[JustintkwParticipant]

Thanks, Peter. I basically was following an example from one of the demo on how to integrate the tooltip with the grid. In that demo, the line:

$(“#jqxGrid_StdInCS”).jqxTooltip({ content: tooltipContent });

was placed inside the cellhover function. Is this what you meant by me re-creating the tooltip? Is there a way to just update the tooltip content when I move the mouse from cell to cell without re-creating the tooltip, and can you point me to a demo on how that can be achieved?

[Peter StoevKeymaster]

Hi Justintkw,

You should create the Tooltip 1 time and then you should change only the Tooltip’s content. I hope that you do not think that it is correct to change several properties of a widget on each mouse move.

Best Regards,
Peter Stoev
jQWidgets Team
http://www.jqwidgets.com/

[JustintkwParticipant]

Peter, I am just following YOUR advice on how to create the tooltip for the cells (http://www.jqwidgets.com/community/topic/grid-tooltip/). If this is not the correct approach, then perhaps the thread should be updated and commented as such.

I have looked through the site for weeks. There are many examples of creating tooltips for the column, for simply using the cell value as the tooltip content, but I am not able to find an example that shows the following:

1. Create a tool tip that shows different content (NOT just the cell value) for each and every cell.
2. Being able to not only set the initial content of the tooltip during grid creation/rendering, but to change it AFTER the grid is rendered, by some other function that is outside the $(document).ready(function () {}) block where the grid is created.

Thanks.

[Peter StoevKeymaster]

Hi Justintkw,

The topic you’re pointing out is from 2012 so it’s not much actual. Unfortunately, we don’t have examples for everything and you will have to come up with own solution about how to manage your custom tooltips for your Grid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts