javascript - 刷新一个元素，使其新的工具提示显示（在 jQuery/Javascript 中）

Question

我有一个 html 元素，当悬停在它上面时，它使用引导工具提示来显示标题。但是，当您单击此元素时，我正在更改工具提示，但新的工具提示不会显示，直到我从中移除鼠标并再次将鼠标悬停在该元素上。

我希望在单击所述按钮时立即显示工具提示。我怎样才能做到这一点？有没有办法在缺乏更好的词的情况下“刷新”html元素？

Answer 1

试试这个方法

演示：

http://jsfiddle.net/dreamweiver/9z404crn/

$(document).ready(function() {
  $('#example').tooltip();
  $('#example').on('click', function() {
    $(this).attr('data-original-title', 'changed tooltip');
    $('#example').tooltip();
    $(this).mouseover();
  });
});

h3 {
  margin-top: 50px;
}

<h3>
  Sensors Permissions
  <i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
</h3>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

笔记：

以上逻辑仅适用于 Bootstrap 2.3.2及以下版本，但是，@NabiK.AZ提供的解决方案将适用于最新版本的 Bootstrap lib。

快乐编码:)

Answer 2

您可以使用以下代码：

var newTooltip = 'Changed this tooltip!';
$('#example').attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);

我用引导程序 3.3.4 测试它

你可以在这里看到它：

http://jsfiddle.net/NabiKAZ/a4WwQ/1029/

$('a[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom',
});

$('.mytooltip').hover(function() {
  $('.mytooltip').tooltip('show');
});

$('.mytooltip').click(function() {
  var newTooltip = 'Changed this tooltip!';
  $(this).attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
});

.cart {
  overflow: hidden;
  padding: 10px 3px;
  background: yellow;
}

<div class="cart">
  <a data-toggle="tooltip" title="add to cart" class="mytooltip">
    <i class="icon-shopping-cart"></i>
  </a>
</div>

<br>

<div>
  <a data-toggle="tooltip" title="add to another cart" class="mytooltip">
    <i class="icon-shopping-cart"></i>
  </a>
</div>


<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
  About this SO Question: <a href='http://stackoverflow.com/q/19630749/1366033'>How to make bootstrap 3 tooltip work with parent div with overflow:hidden?</a><br/> Find documentation: <a href='http://getbootstrap.com/javascript/#tooltips'>Bootstrap 3.0 ToolTips</a><br/>  Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
  <div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

Answer 3

对我来说，在 bootstrap 4 这有效：

$("#xxx").tooltip("dispose").attr("title", "New Tooltip").tooltip()

Answer 4

现在是 2021 年，使用 Bootstrap 5(BS5) 的所有答案都没有帮助我。上面的大多数答案都更新了$(element).parent().find('.tooltip-inner').html("This is a test");工具提示插件生成的内容。然而，对于 BS5，为工具提示生成的模板具有唯一的 ID，可用于更新工具提示。

这个例子演示了一个简单的场景：当.copy_queue_id点击 div 时，从它的属性中复制队列 ID，因此更新工具提示以通知用户

HTML 标记：

<div class="cursor-pointer text-primary copy_queue_id" data-queueid="123456" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Click to copy"> 123456</small>

JS-JQuery

$(document).on('click', '.copy_queue_id', function(){
    let node = $(this);
    let id = node.data('queueid');
    navigator.clipboard.writeText(id);
    let tooltipid = node.attr('aria-describedby');
    $("#"+tooltipid).find('.tooltip-inner').html('ID Copied!!');
})

在 BS5 中测试和工作希望这对其他人有帮助:)

Answer 5

当然，您只需要更改 onclick 事件中的工具提示文本

$('.tooltip-inner').html("This is a test");

我为您创建了一个 jsfiddle 作为演示http://jsfiddle.net/a4WwQ/59/

目前，它会更改所有可见的工具提示文本，这并不是一个真正的问题，因为您一次不会显示多个。话虽如此，您应该考虑修改代码以指向最近的工具提示。

希望能帮助到你！

Answer 6

如果您想刷新内容；

$('#example').tooltipster('content', 'i am superman!');

Answer 7

2021，Bootstrap 5：更新此属性data-bs-original-title。

你也可以使用 Razor / Blazor ，如下所示：

var title = propExamples.FirstOrDefault(q => q.Key == selectedType.Id).Value;
<div class="col-sm-2">
    <img class="zoom-on-hover cursor-pointer fit-image grayout"
            src="/lib/bootstrap-icons-1.5.0/info-lg.svg"
            data-bs-toggle="tooltip" data-placement="bottom"
            data-bs-original-title="@title" />
</div>