javascript - jQuery 如何在单击时切换引导工具提示文本

标签 javascript jquery html css

我有四个带有工具提示的按钮。我需要在单击链接时切换工具提示文本。我可以更改工具提示文本,但我找不到如何切换文本。有没有一种方法可以用最少的代码实现这一点。

JS FIDDLE

    $('.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/

相关文章:

javascript - 将 JSON 对象加载到 D3 力定向图中

php - Javascript 到 PHP 而不是使用 Ajax?

javascript - onclick 函数 - json 字符串变量不起作用

javascript - 选择动态插入的 HTML 元素来改变一个简单的 CSS 规则

jquery - 加载页面时,使 iFrame 中的内容从底部开始

html - 调整窗口大小时 100% 宽度无响应的 HTML 布局崩溃

javascript - 三.CurvePath和自定义标记

javascript - 销毁Xml View sapui5

javascript - 用编辑器(和返回)递归替换元素会破坏事件监听器

javascript - 删除之前在 HTML5 Canvas 上绘制的线条