logo标签列表

无法更改Bootstrap工具提示标题

javascriptjquerycsstwitter-bootstrap
10

我已经查看了几篇关于在堆栈溢出上提出几乎完全相同问题的帖子，但是我在这些问题中找到的东西都没有帮助。我非常新手JQuery和Bootstrap，所以可能我只是错过了一些非常简单的事情。

我想能够在第一次初始化之后更改不同元素的工具提示标题（理想情况下，在初始化后多次更改）。 我正在处理的简化版本：

<canvas id="bag0"  data-toggle="tooltip" title="test">
</canvas>
...
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

$(document).ready(function(){
            $('#bag0').data('tooltip',false)          
                  .tooltip({ title: 'new text'});
            $('[data-toggle="tooltip"]').tooltip();

});

这种更改标题的方法来自于发帖：如何覆盖 Twitter Bootstrap 工具提示？

工具提示始终显示“test”。我已经尝试了一些其他方法但没有用。我怀疑我正在忽略一些显而易见的东西。

从您提到的链接中，那个答案说明在Bootstrap v3中使用data('bs.tooltip')而不是data('tooltip')。 - Help
哦，是的，我确实尝试过，但它没有起作用（刚刚又尝试了一次）。忘记在帖子中更改了。 - Khaines0625
$(#bag0').tooltip('destroy').tooltip({title:"new text"}) 这样可以吗？ - R Lam
@RLam 未捕获的 TypeError: 没有名为 "destroy" 的方法 https://getbootstrap.com/docs/4.1/components/tooltips/#methods，但是 dispose 可以使用。$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')。 - Chloe
@Chloe 在BS4中是“Dispose”，在BS3中是“Destory”。 - R Lam
8个回答
25

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

以上代码可能会对您有帮助。

$.tooltip(string) 调用 Tooltip 类中的任何函数。如果您查看 Tooltip.fixTitle，会发现它获取 data-original-title 属性并将其替换为 title 值。

您可以使用元素的 id 或 class 使其更具体。

  • 帮助 :)
2
fixTitle is not one of the valid listed parameters. https://getbootstrap.com/docs/4.1/components/tooltips/#methods Uncaught TypeError: No method named "fixTitle" - Chloe
1
我在Bootstrap 4中遇到了与@Chloe相同的错误；我不得不将“fixTitle”更改为“_fixTitle”，才能使其正常工作。 - TimP
@TimP 请查看下面的答案，了解Bootstrap 4。https://dev59.com/D1sW5IYBdhLWcg3w0aHM#52320836 - Chloe
11
7

Bootstrap 4

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


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

5

Change Bootstrap 4 Tooltip title 

$(document).ready(function() {
  // initilizing Tooltip
  $('[data-toggle="tooltip"]').tooltip();

  // Get the Tooltip
  let btn_tooltip = $('#my-btn');

  // Change Tooltip Text on mouse enter
  btn_tooltip.mouseenter(function () {
    btn_tooltip.attr('title', 'Default Tooltip').tooltip('dispose');
    btn_tooltip.tooltip('show');
  });

  // Update Tooltip Text on click
  btn_tooltip.click(function () {
    btn_tooltip.attr('title', 'Modified Tooltip').tooltip('dispose');
    btn_tooltip.tooltip('show');
  });
});
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <p>Click the button:</p>
  <button id="my-btn" type="button" class="btn btn-primary" data-toggle="tooltip" title="Default tooltip">Click Me</button>
</div>

</body>
</html>

1
尝试以下操作： 

$(document).ready(function(){
            $('#bag0').attr('title', 'new text')
                  .tooltip('destroy') // if you are using BS4 use .tooltip('dispose')
                  .tooltip({ title: 'new text'});
            $('[data-toggle="tooltip"]').tooltip('show');

});
<canvas id="bag0"  data-toggle="tooltip" title="test">
</canvas>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

1
我有一个类似的解决方案。我通过ajax动态更改工具提示中的标题来实现。

  • 首先，启用工具提示：

    $('[data-toggle="tooltip"]').tooltip()

  • 然后更改标题属性，然后重新初始化工具提示

$("#foo").attr('title','TheNewTitle');
$('[data-toggle="tooltip"]').tooltip('dispose');
$('[data-toggle="tooltip"]').tooltip()

1
这可能会有所帮助。
$('[data-toggle="tooltip"]').attr("title","NEW TEXT");

如果您想针对特定元素进行操作，比如一个 <div> 元素。
$('div[data-toggle="tooltip"]').attr("title","NEW TEXT");
那确实改变了显示的工具提示。但是，这不会改变页面上所有元素上的所有工具提示吗？我计划有很多工具提示，并希望逐个更改它们。 - Khaines0625
只需将要更改的元素放入选择器中 $('YOUR_DIV[data-toggle="tooltip"]').attr("title","NEW TEXT");。 - Hemal
1
如果工具提示已经创建，这不会更改工具提示的标题。您需要在设置新标题后调用.tooltip('fixTitle')才能生效，如下所示由@help演示。 - Uncle Arnie
1
@UncleArnie fixTitle 不是有效的方法。Uncaught TypeError: No method named "fixTitle" https://getbootstrap.com/docs/4.1/components/tooltips/#methods - Chloe
@Chloe 这仅适用于 Bootstrap v3。 - Uncle Arnie
0

我可能有点晚了，但我的解决方案是更改data-original-title的值：

$('.sample').attr('data-original-title': '新标题');

这将自动更改Bootstrap工具提示的标题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接