CODEWITHSUNDEEP
jquerytooltiptooltipster
afazolo
afazolo

Reputation: 382

Dynamically change only one element in tooltip title using tooltipster

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');
}

Upvotes: 2

Views: 6197

Answers (2)

Roy Shmuli
Roy Shmuli

Reputation: 5019

I found this command work to change title:

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

Upvotes: 9

afazolo
afazolo

Reputation: 382

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.

Upvotes: -2

Related Questions