我有四个带有工具提示的按钮。我需要在单击链接时切换工具提示文本。我可以更改工具提示文本,但我找不到如何切换文本。有没有一种方法可以用最少的代码实现这一点。
$('.link1').on('click', function(){
$(this).attr('data-original-title','Tooltip Changed');
});
$('.link2').on('click', function(){
$(this).attr('data-original-title','Tooltip Changed');
});
$('.link3').on('click', function(){
$(this).attr('data-original-title','Tooltip Changed');
});
$('.link4').on('click', function(){
$(this).attr('data-original-title','Tooltip Changed');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="link link1" data-toggle="tooltip" data-placement="top" title="Tooltip 1">Button 1</a>
<a class="link link2" data-toggle="tooltip" data-placement="top" title="Tooltip 2">Button 2</a>
<a class="link link3" data-toggle="tooltip" data-placement="top" title="Tooltip 3">Button 3</a>
<a class="link link4" data-toggle="tooltip" data-placement="top" title="Tooltip 4">Button 4</a>
最佳答案
您的 JavaScript/jquery 代码应如下所示,以便在单击链接时更改工具提示文本。 改变tooltip文本的方法是设置tooltip的标题,然后点击链接时需要显示tooltip。
您可以在 JSFiddle 查看工作示例
$("a").tooltip();
$('.link1').on('click', function() {
toggleToolTip.call(this, "Tooltip 1", "Tooltip Changed");
});
$('.link2').on('click', function() {
toggleToolTip.call(this, "Tooltip 2", "Tooltip Changed");
});
$('.link3').on('click', function() {
toggleToolTip.call(this, "Tooltip 3", "Tooltip Changed");
});
$('.link4').on('click', function() {
toggleToolTip.call(this, "Tooltip 4", "Tooltip Changed");
});
function toggleToolTip(originalTitle, newTitle) {
var lastTitle = $(this).attr('data-original-title');
$(this).attr('data-original-title',lastTitle === originalTitle ? newTitle : originalTitle);
$(this).tooltip("show");
}
关于javascript - jQuery 如何在单击时切换引导工具提示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54969531/