无法更改bootstrap Tooltip标题

时间:2015-12-31 04:27:34

标签: javascript jquery css twitter-bootstrap

我已经查看了几个关于堆栈溢出的帖子,几乎问了同样的问题,但我在这些问题上找到的并没有帮助。我是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();

});

此更改标题的方法来自发布:How to overwrite twitter bootstrap tooltip?

工具提示始终显示为“test”。我用其他一些东西修补了无用的东西。我怀疑我忽视了一些显而易见的事情。

7 个答案:

答案 0 :(得分:21)

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

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

$ .toittiti(string)调用Tooltip类中的任何函数。如果你看一下Tooltip.fixTitle,它会获取data-original-title属性并用它替换标题值。

您可以使用元素ID或类来使其更具体。

  • 帮助:)

答案 1 :(得分:5)

试试这个

$(element).tooltip().attr('data-original-title', "new title");

来源:github bootstrap issue

答案 2 :(得分: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>

答案 3 :(得分:0)

这可能会有所帮助

$('[data-toggle="tooltip"]').attr("title","NEW TEXT");

如果您想要某个特定元素,请说出<div>

$('div[data-toggle="tooltip"]').attr("title","NEW TEXT");

答案 4 :(得分:0)

引导程序4

const wrappedData = wrapProperties(data, "val");    
if (wrappedData.getCoach.workouts.items.value) {
  wrappedData.getCoach.workouts.items.value.map((workout) => {/* do something*/}) 
}

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

答案 5 :(得分:0)

我可能为时已晚,但是我的解决方案是更改data-original-title

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

这会自动更改引导工具提示标题。

答案 6 :(得分:0)

更改Bootstrap 4工具提示标题

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