I have a java script class.inside a method I am dynamically populating table content(all rows and columns).my table has 20 rows each page. In one column I have added ui-icon-info. on mouse hover on each icon I call a new java script method(showToolTip) that I have written. from showToolTip method I am done ajax call to fetch a note(content for tooltip). After ajax call it goes to another method where I am using jQuery to display tooltip. my code is similar to below:
$( "#"+toolTipId ).tooltip({
content: toolTipNote(coming from ajax call),
track: true,
position: { my: "left+15 center", at: "right center" },
show: false,
hide: false,
}).
toolTipId is change dynamically on each mouse hover.
Now:
with above code tool tip was showing on second time mouse hover onwards on each icon and I did not have any tooltip lingering issue.tooltip hides on mouseout.
But I need to show tooltip from first mouse hover.
I came across few solution:
put my above code inside $(function){}--did not work
put my above code inside $(document).ready(function(){})--did not work
.tooltip('open')
--it worked
$( "#"+toolTipId ).tooltip({
content: toolTipNote(coming from ajax call),
track: true,
position: { my: "left+15 center", at: "right center" },
show: false,
hide: false,
}).tooltip('open')
but I got tooltip lingering issue.when I move mouse fast on many icons quickly. when I tried to close tooltip.that is also not working for me.may be I m doing incorrect.
any help will be highly appriciated. Thanks in advance