刷新一个元素,使其新的工具提示显示(在jQuery / Javascript中)
我有一个html元素,它使用bootstrap工具提示在鼠标hover时显示标题。 但是,当您单击此元素时,我正在更改工具提示,但是直到我从中移除鼠标并再次将鼠标hover在元素上之后,新的工具提示才会显示。
我希望在单击所述按钮时立即显示工具提示。 我怎样才能做到这一点? 有没有办法“刷新”,缺乏更好的单词,一个HTML元素?
试试这种方式
HTML代码:
Sensors Permissions
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提供的解决方案也适用于最新版本。
快乐编码:)
您可以使用此代码:
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/
当然,您只需要在onclick事件中更改工具提示文本
$('.tooltip-inner').html("This is a test");
我为你创建了一个jsfiddle作为演示http://jsfiddle.net/a4WwQ/59/
目前它将更改所有可见的工具提示文本,这不是一个真正的问题,因为你不会一次显示多个。 话虽这么说,您应该考虑修改代码以指向最接近的工具提示。
希望能帮助到你!