使用工具提示器动态更改工具提示标题中的一个元素

时间:2013-10-02 03:14:43

标签: jquery tooltip tooltipster

我在tooltipster title属性中有一组选项,如下所示:

<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>

单击div1时,内容将根据以下函数通过ajax结果进行动态更新:

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

问题是当关闭工具提示并且页面尚未刷新时,内容将返回初始值,而不是显示更新的值。

我尝试使用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');
} 

但是,这会更改div1的内容,但会删除其他div的内容。如何仅更新div1的内容并保持其他内容不变?

== EDIT ==

我更喜欢不通过所有div集的解决方案,例如关注:

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

2 个答案:

答案 0 :(得分:7)

我发现这个命令可以改变标题:

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

答案 1 :(得分:0)

我意识到从title属性渲染大量的html是一种糟糕的方法!所以,我发现tooltipster不适合我的需求,我开始使用jQuery Bootstrap-style Dropdowns