时间戳

首页 > 解决方案 > jQuery如何在点击时切换引导工具提示文本

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

问题描述

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

JS小提琴

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

标签： javascriptjqueryhtmlcss

解决方案

您的 JavaScript/jquery 代码应如下所示，以便在单击链接时更改工具提示文本。更改提示文字的方法是设置 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");
}

推荐阅读