Question

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

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

Answer 1

您的JavaScript / jquery代码应如下所示，以便在单击链接时更改工具提示文本。更改工具提示文本的方法是设置工具提示的标题，然后需要在单击链接时显示工具提示。

您可以在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");
}

Answer 2

让我们尝试...

jquery显示的简单工具提示。

$(".item").click(function() {
  $( ".tooltip" ).removeClass( "hide" ); 
  $( ".tooltip" ).addClass( "show" );

})

$(".tooltip").click(function() {
  $( ".tooltip" ).removeClass( "show" );   $( ".tooltip" ).addClass( "hide" );
   
})

.item {
  width: 100px;
  Height: 100px;
  background: #EEE;
  padding: 20px;
  cursor: pointer;
}

.tooltip {
  cursor: pointer;
  position: fixed;
  padding: 20px;
  background: #EEE;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: none;
  z-index: 1999;
}
.tooltip:after {
  content: "X";
  position: absolute;
  background: rgba(0, 0, 0, 0.1);
  top:0px;
  right: 0px;
  padding: 5px;
  z-index:988;
}
.hide {
  display: none;
}
.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  Icon
</div>
<div class="tooltip">Content goes there</div>

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

2 个答案: