Apply Jquery tooltip on jqgrid custom formatted cell

Question

I'm desperately trying to implement the jquery tooltip on some jqgrid cell. I formatted the the cell to have their own title like this:

<td role="gridcell" style="" title="Toto, Tata" aria-describedby="MyTaskUserView_TaxpayerName">
    <span class="fullCellSpan customTooltip" title="123456" originalvalue="Toto Tata">Toto Tata</span>
</td>

I tried to call the tooltip on my span containing the title:

  $("td span.customTooltip").tooltip();

And I don't understand why it's not working.

If I call it like this

$(document).tooltip();

it will work but then it will apply the tooltip on every element that have a title element which is not what I want.

It's like it didn't recognize the html path I'm giving which I don't understand.

Thanks in advance for your help

score 0 · Answer 1 · answered Jan 09 '14 at 11:41

I found the bug, when I was calling the tooltip the grid had not yet finish loading. Since I used the JqGrid ASP.NET MVC license I used the ClientSideEvents.GridInitialized attribute of the model to know when the grid is loaded and then trigger the tooltip.

MyGrid.ClientSideEvents.GridInitialized = "initGrid";

function initGrid() {
$("td span.fullCellSpan").tooltip({
    hide: {
        effect: "fade",
        duration: 500
    },
    position: {
        my: "left center",
        at: "right top",
        collison: "flip"
    },
    show: {
        effect: "fade",
        duration: 800
    }
});
}

Hope this can help other users.

score 0 · Answer 2 · edited May 23 '17 at 12:29

The newer way is to use the cellattr function, in the asp.net library that is:

<Formatter>
    <trirand:CustomFormatter SetAttributesFunction="clientSideFunctionName" />
</Formatter>

More details can be found here: https://stackoverflow.com/a/5281391/356218 and https://stackoverflow.com/a/12215880/356218

and the JS would look something like like:

function clientSideFunctionName(rowId, tv, rawObject, cm, rdata) {
    //conditional formatting
     if (Number(rawObject[colMap.missingBooks]) > 0) {
         return ' style="background-color:#FFCCCC" title="tooltips are cool!"';
     } else {
         return '';
     }
}

Apply Jquery tooltip on jqgrid custom formatted cell

2 Answers2