Kha*_*625 5 javascript css jquery 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();
});
这个更改标题的方法来自发布:如何覆盖twitter bootstrap工具提示？
工具提示始终显示为"test".我用其他一些东西修补了无用的东西.我怀疑我忽略了一些显而易见的事情.
Hel*_*elp 23
$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');
以上代码可能对您有所帮助
$ .tooltip(string)调用Tooltip类中的任何函数.如果你看一下Tooltip.fixTitle,它会获取data-original-title属性并用它替换标题值.
您可以使用元素id或类使其更具体.
小智 6
尝试这个
$(element).tooltip().attr('data-original-title', "new title");
$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')
$('#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;
}更改 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>这可能有帮助
$('[data-toggle="tooltip"]').attr("title","NEW TEXT");
如果您想要某个特定元素，请说<div>
$('div[data-toggle="tooltip"]').attr("title","NEW TEXT");