刷新一个元素,使其新的工具提示显示(在jQuery / Javascript中)

时间:2014-02-27 09:55:18

标签: javascript jquery twitter-bootstrap twitter-bootstrap-tooltip

我有一个html元素,它使用bootstrap工具提示在鼠标悬停在它上面时显示标题。但是,当您单击此元素时,我正在更改工具提示,但是直到我从中移除鼠标并再次将鼠标悬停在元素上时,新的工具提示才会显示。

我希望在点击所述按钮时立即显示工具提示。我怎样才能做到这一点?有没有办法“刷新”,缺乏更好的单词,一个HTML元素?

5 个答案:

答案 0 :(得分:6)

试试这种方式

HTML CODE:

 <h3>
Sensors Permissions
   <i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
 </h3>

JQUERY CODE:

$(document).ready(function () {
   $('#example').tooltip();
   $('#example').on('click', function () {
     $(this).attr('data-original-title', 'changed tooltip');
     $('#example').tooltip();
     $(this).mouseover();
   });
});

现场演示:

http://jsfiddle.net/dreamweiver/9z404crn/

注意:以上逻辑仅适用于Bootstrap版本 2.3.2 及以下版本,但@ NabiK.AZ提供的解决方案也适用于最新版本。

快乐编码:)

答案 1 :(得分:4)

您可以使用此代码:

var newTooltip = 'Changed this tooltip!';
$('#example').attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);

我用bootstrap 3.3.4测试它,你可以看到它:http://jsfiddle.net/NabiKAZ/a4WwQ/1029/

答案 2 :(得分:0)

当然,您只需更改onclick事件中的工具提示文本

$('.tooltip-inner').html("This is a test");

我为你演示了一个jsfiddle http://jsfiddle.net/a4WwQ/59/

目前,它会更改所有可见的工具提示文本,这不是一个真正的问题,因为您不会一次显示多个。话虽这么说,你应该考虑修改代码以指向最接近的工具提示。

希望它有所帮助!

答案 3 :(得分:0)

以防您要刷新内容;

$('#example').tooltipster('content', 'i am superman!');

答案 4 :(得分:0)

对我在引导程序 4 中这有效:

$("#xxx").tooltip("dispose").attr("title", "New Tooltip").tooltip()