Dynamically change only one element in tooltip title using tooltipster

Question

I have a set of options in a tooltipster title attribute, like follow:

<i class="icon-cog settings" title="
                   <div class='div1' onclick='follow(1,2)'>Content 1</div>
                   <div class='div2' ...>Content 2</div>
                   <div class='div3' ...>Content 3</div>
                                                   ">
</i>

When the div1 is clicked, the content is dinamically updated by a ajax result based on the following function:

function follow(f1,f2) {
$.get('/exe/add_followers.php?f1=' + f1 + '&f2=' + f2, function (result) {
    $('.div'+f2).html('content 1 is updated to' + result.newcontent);
    }, 'json');
}

The problem is that when the tooltip is closed and the page has not been refreshed, the content returns to the initial value instead of showing the updated value.

I tried to use a configuration option as described Here:

function follow(f1,f2) {
    $.get('/exe/add_followers.php?f1=' + f1 + '&f2=' + f2, function (result) {
        // $('.div'+f2).html('content 1 is updated to' + result.newcontent);
        $('.settings').tooltipster('update', 'content 1 is updated to' + result.newcontent);
        }, 'json');
}

However, this change the div1's content but removes the content of other divs. How can I update only the content of div1 and leave the other unchanged?

==EDIT==

I prefer a solution that do not pass the all set of divs, like follow:

function follow(f1,f2) {
    $.get('/exe/add_followers.php?f1=' + f1 + '&f2=' + f2, function (result) {
        $('.settings').tooltipster('update', '
                                              <div class='div1' onclick='follow(1,2)'>'+result.newcontent+'</div>
                                              <div class='div2' ...>Content 2</div>
                                              <div class='div3' ...>Content 3</div>
                                             ');
        }, 'json');
}

Try to escape title attribute values with combination of ' and " to escape html as string — ram, Oct 02 '13 at 03:50
It does works. The html becomes a mess. Moreover, [here](http://calebjacob.com/tooltipster/#getting-started), in the "Using HTML tags inside your tooltips" section, says to "use single quotes when setting attributes". — afazolo, Oct 02 '13 at 04:09

score 9 · Answer 1 · answered Apr 02 '15 at 07:26

9

I found this command work to change title:

$('#selectorElement').tooltipster('content', 'new title');

answered Apr 02 '15 at 07:26

Roy Shmuli

4,979
1
24
38

1

Are you sure that it works? cause I get "Tooltipster: one or more tooltips are already attached to the element below. Ignoring." – Iman Mohamadi Jan 08 '19 at 13:15

score -2 · Accepted Answer · answered Oct 06 '13 at 21:50

-2

I realized that rendering a large amount of html from title attribute is a bad approach! So, I found that tooltipster is not suitable for my needs and I started to use jQuery Bootstrap-style Dropdowns.

answered Oct 06 '13 at 21:50

afazolo

382
2
6
22

Dynamically change only one element in tooltip title using tooltipster

2 Answers2