我有一个html元素,它使用bootstrap工具提示在鼠标悬停在它上面时显示标题。但是,当您单击此元素时,我正在更改工具提示,但是直到我从中移除鼠标并再次将鼠标悬停在元素上时,新的工具提示才会显示。
我希望在点击所述按钮时立即显示工具提示。我怎样才能做到这一点?有没有办法“刷新”,缺乏更好的单词,一个HTML元素?
答案 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()