/    Sign up×
Community /Pin to ProfileBookmark

Problem with jquery ui tooltip(https://jqueryui.com/tooltip/) update contents.

Copy linkTweet thisAlerts:
Nov 26.2015

I am using jquery ui tooltip([url]https://jqueryui.com/tooltip/[/url]) and I am using a table as a contents, but it doesn’t update text of $(“#TDTax1_” + i) inside the table when I hoverover the image.

[code=html]
<img width=”15″ height=”15″ title=”” src=”/files/404048/93171/Info-32.png” id=”TaxesAmount_1″ class=”TaxesClass” aria-describedby=”ui-id-5″>
[/code]

[CODE]function Init()
{
var ToolTipTable = ‘<body> <table width=”150px” border=”0″ cellspacing=”1″ cellpadding=”1″> <tr> <td class=”ToolTipTableClass”>Tax1 :</td> <td class=”ToolTipTableClass” id=’TDTax1_’ + i + ”></td> </tr> <tr> <td class=”ToolTipTableClass”>Tax2 :</td> <td class=”ToolTipTableClass” id=’TDTax2_’ + i + ”></td> </tr> </table> </body>’;

$(“#TaxesAmount_1”).prop(‘title’, ToolTipTable);
$(“#TaxesAmount_1”).tooltip({
content: function (){
return $(this).prop(‘title’);
}
});
}

function ABC()
{
$(“#TDTax1_” + i).text(“New Value”);
} [/CODE]

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumNov 26.2015 — The problem is that the elements for diplaying the tooltip are created temporary and exist only during hover. You could fix this by creating the elements permanently:
[CODE]function Init()
{

ToolTipTables[i] = $('<table width="150px" border="0" cellspacing="1" cellpadding="1"> <tr> <td class="ToolTipTableClass">Tax1 :</td> <td class="ToolTipTableClass" id='TDTax1_' + i + ''></td> </tr> <tr> <td class="ToolTipTableClass">Tax2 :</td> <td class="ToolTipTableClass" id='TDTax2_' + i + ''></td> </tr> </table>');

$("#TaxesAmount_1").prop('title', ToolTipTable);
$("#TaxesAmount_1").tooltip({
content: function (){
return $(this).html(ToolTipTables[i]);
}
});
}

function ABC()
{

$("#TDTax1_" + i).text("New Value");
}[/CODE]
Copy linkTweet thisAlerts:
@asifakhtarauthorNov 26.2015 — The problem is that the elements for diplaying the tooltip are created temporary and exist only during hover. You could fix this by creating the elements permanently:
[CODE]function Init()
{

ToolTipTables[i] = $('<table width="150px" border="0" cellspacing="1" cellpadding="1"> <tr> <td class="ToolTipTableClass">Tax1 :</td> <td class="ToolTipTableClass" id='TDTax1_' + i + ''></td> </tr> <tr> <td class="ToolTipTableClass">Tax2 :</td> <td class="ToolTipTableClass" id='TDTax2_' + i + ''></td> </tr> </table>');

$("#TaxesAmount_1").prop('title', ToolTipTable);
$("#TaxesAmount_1").tooltip({
content: function (){
return $(this).html(ToolTipTables[i]);
}
});
}

function ABC()
{

$("#TDTax1_" + i).text("New Value");
}[/CODE][/QUOTE]

You code hides my image(<img width="15" height="15" title="" src="/files/404048/93171/Info-32.png" id="TaxesAmount_1" class="TaxesClass" aria-describedby="ui-id-5">) and doesn't create the table at all and doesn't show the tooltip at all.
Copy linkTweet thisAlerts:
@SempervivumNov 26.2015 — Unfortunately I didn't know the context of your code and was not able to test my code before posting. I'm fairly shure that it will work. Try to debug it or upload it and post the URL.
Copy linkTweet thisAlerts:
@SempervivumNov 26.2015 — Tested and debugged the code now. This runs:
[CODE] $(document).ready(function () {
var ToolTipTables = [];
function Init() {
ToolTipTables[i] = $('<table width="150px" border="0" cellspacing="1" cellpadding="1"> <tr> <td class="ToolTipTableClass">Tax1 :</td> <td class="ToolTipTableClass" id='TDTax1_' + i + ''></td> </tr> <tr> <td class="ToolTipTableClass">Tax2 :</td> <td class="ToolTipTableClass" id='TDTax2_' + i + ''></td> </tr> </table>');

//$("#TaxesAmount_1").prop('title', ToolTipTable);
$("#TaxesAmount_1").tooltip({
content: function (idx) {
return function() {
return ToolTipTables[idx].html();
}
}(i)
});
}
var i = 0;
Init();
i = 5;
function ABC() {
$("#TDTax1_" + i).text("New Value");
}
});
[/CODE]
Copy linkTweet thisAlerts:
@asifakhtarauthorNov 26.2015 — Tested and debugged the code now. This runs:
[CODE] $(document).ready(function () {
var ToolTipTables = [];
function Init() {
ToolTipTables[i] = $('<table width="150px" border="0" cellspacing="1" cellpadding="1"> <tr> <td class="ToolTipTableClass">Tax1 :</td> <td class="ToolTipTableClass" id='TDTax1_' + i + ''></td> </tr> <tr> <td class="ToolTipTableClass">Tax2 :</td> <td class="ToolTipTableClass" id='TDTax2_' + i + ''></td> </tr> </table>');

//$("#TaxesAmount_1").prop('title', ToolTipTable);
$("#TaxesAmount_1").tooltip({
content: function (idx) {
return function() {
return ToolTipTables[idx].html();
}
}(i)
});
}
var i = 0;
Init();
i = 5;
function ABC() {
$("#TDTax1_" + i).text("New Value");
}
});
[/CODE][/QUOTE]

I still don't see the updated value when I hoverover the image.
Copy linkTweet thisAlerts:
@SempervivumNov 26.2015 — Obviously jQuery finds the element only when it's in the dom. But this should work:
[CODE] function ABC() {
ToolTipTables[i].find("#TDTax1_" + i).text("New Value");
//$("#TDTax1_" + i).text("New Value");
}[/CODE]
Copy linkTweet thisAlerts:
@asifakhtarauthorNov 27.2015 — Obviously jQuery finds the element only when it's in the dom. But this should work:
[CODE] function ABC() {
ToolTipTables[i].find("#TDTax1_" + i).text("New Value");
//$("#TDTax1_" + i).text("New Value");
}[/CODE][/QUOTE]
Thank you very much. It works now.
×

Success!

Help @asifakhtar spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...