我在一个锚元素上有一个工具提示，它在点击时发送一个AJAX请求 . 这个元素有一个工具提示（来自Twitter Bootstrap） . 我希望在AJAX请求成功返回时更改工具提示内容 . 如何在启动后操纵工具提示？

23 回答

2
刚刚在阅读源代码时发现了这一点 . 所以 $.tooltip(string) 调用 Tooltip 类中的任何函数 . 如果你看 Tooltip.fixTitle ，它会获取 data-original-title 属性并用它替换 Headers 值 .

所以我们干脆做到：
```
$(element).tooltip('hide')
          .attr('data-original-title', newValue)
          .tooltip('fixTitle')
          .tooltip('show');
```
果然，它会更新 Headers ，这是工具提示中的值 .

另一种方式（见下面的@lukmdo评论）：
```
$(element).attr('title', 'NEW_TITLE')
          .tooltip('fixTitle')
          .tooltip('show');
```
回复于 2024-04-26T14:09:14+08:00
11
在Bootstrap 3中，调用 elt.attr('data-original-title', "Foo") 就足够了，因为 "data-original-title" 属性中的更改已触发工具提示显示中的更改 .

UPDATE: 您可以添加.tooltip（'show'）立即显示更改，您无需鼠标移除和鼠标悬停目标以查看 Headers 中的更改
```
elt.attr('data-original-title', "Foo").tooltip('show');
```
回复于 2024-04-26T14:09:14+08:00
-1
您可以在不实际调用show / hide的情况下更新工具提示文本：
```
$(myEl)
    .attr('title', newTitle)
    .tooltip('fixTitle')
    .tooltip('setContent')
```
回复于 2024-04-26T14:09:14+08:00
2
如果您想在不关闭并重新打开工具提示的情况下更改文本，那么这是一个很好的解决方案 .
```
$(element).attr('title', newTitle)
          .tooltip('fixTitle')
          .data('bs.tooltip')
          .$tip.find('.tooltip-inner')
          .text(newTitle)
```
这样，文本被替换而没有关闭工具提示（没有重新定位，但如果你正在做一个单词改变等应该没问题） . 当你将鼠标悬停在工具提示上时，它仍然会更新 .

**这是bootstrap 3，对于2你可能需要更改数据/类名
回复于 2024-04-26T14:09:14+08:00
8
如果工具提示已实例化（可能使用javascript），则此方法有效：
```
$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');
```
回复于 2024-04-26T14:09:14+08:00
0
对于bootstrap 3.x

这似乎是最干净的解决方案：
```
$(element)
  .attr('data-original-title', 'New title').tooltip('show')
```
Show用于立即更新 Headers ，而不是等待隐藏工具提示并再次显示 .
回复于 2024-04-26T14:09:14+08:00
0
您可以使用以下代码更改 data-original-title ：
```
$(element).attr('data-original-title', newValue);
```
回复于 2024-04-26T14:09:14+08:00
4
以下对我来说效果最好，基本上我正在废弃任何现有的工具提示而不打扰显示新的工具提示 . 如果在工具提示中像在其他答案中一样调用show，则即使光标没有悬停在其上方，它也会弹出 .

我采用这种解决方案的原因是，其他解决方案，重新使用现有的工具提示，导致一些奇怪的问题，工具提示有时在将光标悬停在元素上方时不显示 .
```
function updateTooltip(element, tooltip) {
    if (element.data('tooltip') != null) {
        element.tooltip('hide');
        element.removeData('tooltip');
    }
    element.tooltip({
        title: tooltip
    });
}
```
回复于 2024-04-26T14:09:14+08:00

对于Bootstrap 4：

$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");

回复于 2024-04-26T14:09:14+08:00

1

谢谢这段代码对我很有帮助，我发现它对我的项目有效

$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');

回复于 2024-04-26T14:09:14+08:00
6

在bootstrap 4中我只使用 $(el).tooltip('dispose'); 然后正常重新创建 . 因此，您可以将dispose置于创建工具提示的函数之前，以确保它不会加倍 .

必须检查状态并修改值似乎不太友好 .

回复于 2024-04-26T14:09:14+08:00

Bootstrap 4

$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')

https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose

$('#topic_1').tooltip({title: 'Hello'}).tooltip('show');
setTimeout( function() {
  $('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show');
}, 5000);

#topic_1 {
  border: 1px solid red;
  margin: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<div id="topic_1">Topic 1</div>

回复于 2024-04-26T14:09:14+08:00

您可以使用函数在工具提示调用上设置内容

$("#myelement").tooltip({
            "title": function() {
                return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
            }
        });

您不必仅使用被调用元素的 Headers .

回复于 2024-04-26T14:09:14+08:00

0
销毁任何预先存在的工具提示，以便我们可以使用新的工具提示内容重新填充
```
$(element).tooltip("destroy");    
$(element).tooltip({
    title: message
});
```
回复于 2024-04-26T14:09:14+08:00
367
我认为Mehmet Duran几乎是正确的，但是在使用具有相同工具提示及其位置的多个类时存在一些问题 . 如果有任何名为“tooltip_class”的类，以下代码也可以避免js错误检查 . 希望这可以帮助 .
```
if (jQuery(".tooltip_class")[0]){    

        jQuery('.tooltip_class')
            .attr('title', 'New Title.')
            .attr('data-placement', 'right')
            .tooltip('fixTitle')
            .tooltip('hide');

    }
```
回复于 2024-04-26T14:09:14+08:00

通过直接更改元素中的文本来更改文本 . （不更新工具提示位置） .

$('.tooltip-inner', $element.next()).html(newHtml);
$('.tooltip-inner', $element.next()).text(newText);

通过销毁旧工具提示，然后创建并显示新工具提示来更改文本 . （导致旧的淡出淡出，新的淡出淡出）

$element
.tooltip('destroy')
.tooltip({
    // Repeat previous options.
    title: newText,
})
.tooltip('show');

我正在使用top方法为"Saving."消息设置动画（使用 &nbsp ，因此工具提示的大小不会改变），并在请求完成时将文本更改为"Done."（加填充） .

$element.tooltip({
  placement: 'left',
  title: 'Saving...',
  trigger: 'manual',
}).tooltip('show');

var parent = $element.parent();
var interval_id = setInterval(function(){
    var text = $('.tooltip-inner', parent).html();
    switch(text) {
    case 'Saving.&nbsp;&nbsp;': text = 'Saving..&nbsp;'; break;
    case 'Saving..&nbsp;': text = 'Saving...'; break;
    case 'Saving...': text = 'Saving.&nbsp;&nbsp;'; break;
    }
    $('.tooltip-inner', parent).html(text);
}, 250);

send_request( function(){
    // When the request is complete
    clearInterval(interval_id);
    $('.tooltip-inner', parent).html('Done.&nbsp;&nbsp;&nbsp;&nbsp;');
    setTimeout(function() {
        $element.tooltip('hide');
    }, 1500 /* Show "Done." for a bit */);
});

回复于 2024-04-26T14:09:14+08:00

2
我无法得到任何答案，这是一个解决方法：
```
$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);
```
回复于 2024-04-26T14:09:14+08:00

这对我有用:( bootstrap 3.3.6; jquery = 1.11.3）

<a id="alertTooltip" href="#" data-html="true" class="tooltip" data-toggle="tooltip" title="Tooltip message"></a>

<script>
  $('#alertTooltip').attr('title', "Tooltip new 
 message").tooltip('fixTitle');
</script>

属性 data-html="true" 允许在工具提示 Headers 上使用html .

回复于 2024-04-26T14:09:14+08:00

使用Tooltip对象Boostrap：

$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');

回复于 2024-04-26T14:09:14+08:00

-1

对于BS4（和BS3有微小的变化）..经过数小时的搜索和试验，我想出了解决这个问题的最可靠的解决方案，它甚至解决了同时打开多个（工具提示或弹出框）的问题，失去焦点等后自动打开的问题

$('[data-toggle="tooltip"]').tooltip({
  trigger: 'hover'
}).on('shown.bs.tooltip', function() {
  var link = $(this);
  var data = '';
  data += '<ul style="list-style-type:none;margin:0;padding:0;text-align:left;font-size:12px">';
  data += '	<li>Sherif Salah</li>';
  data += '	<li>Muhammad Salah</li>';
  data += '	<li>and a gazillion more...</li>';
  data += '</ul>';
  link.attr('data-original-title', data);
  setTimeout(function() {
    if (link.is(':hover')) {
      link.tooltip("dispose").tooltip("show");
    }
  }, 1000);
});

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="card">
    <div class="card-body text-center">
      <a href="JavaScript:void(0);" class="btn btn-sm btn-link" data-toggle="tooltip" data-placement="top" data-html="true" title="Loading...">gazillion</a>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>

回复于 2024-04-26T14:09:14+08:00

-1

当ajax请求成功返回时，您可以使用此代码隐藏工具提示更改其 Headers 并再次显示工具提示 .

$(element).tooltip('hide');
$(element).attr('title','this is new title');
$(element).tooltip('fixTitle');
setTimeout(function() {  $(element).tooltip('show');}, 500);

回复于 2024-04-26T14:09:14+08:00

我正在使用这个简单的方法：

$(document).ready(function() {
    $("#btn").prop('title', 'Click to copy your shorturl');
});

function myFunction(){
  $(btn).tooltip('hide');
  $(btn).attr('data-original-title', 'Test');
  $(btn).tooltip('show');
});

回复于 2024-04-26T14:09:14+08:00

4
```
$(this).attr('data-original-title', 'click here to publish')
       .tooltip('fixTitle')
       .tooltip('show');
```
如果您需要在使用attr'data-original-title'初始化工具提示的文本后更改它，则非常有用 .
回复于 2024-04-26T14:09:14+08:00

单击时更改Twitter Bootstrap Tooltip内容

23 回答

Bootstrap 4

相关问题