Answers:
刚刚在阅读源代码的同时发现了这一点。因此$.tooltip(string)
调用Tooltip
该类中的任何函数。并且,如果您查看Tooltip.fixTitle
,它将获取data-original-title
属性并用其替换标题值。
因此,我们只需:
$(element).tooltip('hide')
.attr('data-original-title', newValue)
.tooltip('fixTitle')
.tooltip('show');
并且肯定会更新标题,即工具提示中的值。
另一种方式(请参见下面的@lukmdo评论):
$(element).attr('title', 'NEW_TITLE')
.tooltip('fixTitle')
.tooltip('show');
$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');
$(element).attr('data-original-title', newValue).tooltip('show');
对我来说是最简单的解决方案。
在Bootstrap 3中调用就足够了,elt.attr('data-original-title', "Foo")
因为"data-original-title"
属性中的更改已经触发了工具提示显示中的更改。
更新:您可以添加.tooltip('show')来立即显示更改,您无需将鼠标悬停在目标上方即可将更改显示在标题上
elt.attr('data-original-title', "Foo").tooltip('show');
.tooltip('show');
使其在更新后显示
您可以更新工具提示文本,而无需实际调用show / hide:
$(myEl)
.attr('title', newTitle)
.tooltip('fixTitle')
.tooltip('setContent')
.tooltip('show')
上链的末端,为我工作。
setContent
和show
做的伎俩!您可以data-original-title
直接更改而不是使用fixTitle
如果您想在不关闭和重新打开工具提示的情况下更改文本,这是一个不错的解决方案。
$(element).attr('title', newTitle)
.tooltip('fixTitle')
.data('bs.tooltip')
.$tip.find('.tooltip-inner')
.text(newTitle)
这样,可以在不关闭工具提示的情况下替换文本(不需要重新定位,但是如果要更改一个字等,应该没问题)。当您将鼠标悬停在+上时,它仍会更新。
**这是引导程序3,对于2,您可能必须更改数据/类名
$tip
不是一个属性$(element)
$(element).attr('title', newTitle).tooltip('fixTitle').parent().find('.tooltip .tooltip-inner').text(newTitle);
如果工具提示已实例化(可能使用javascript),则此方法有效:
$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');
$('#tooltip_id').data('bs.tooltip').options.title = 'New_value!';
这是Bootstrap 4的更新:
var title = "Foo";
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');
但是最好的方法是这样做:
var title = "Foo";
elt.attr('title', title);
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');
或内联:
var title = "Foo";
elt.attr('title', title).attr('data-original-title', title).tooltip('update').tooltip('show');
从UX方面,您仅看到文本已更改,没有褪色或隐藏/显示效果,并且不需要_fixTitle
。
您可以data-original-title
使用以下代码更改:
$(element).attr('data-original-title', newValue);
$('#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>
以下内容对我来说是最好的,基本上,我是在废弃任何现有的工具提示,并且不愿意显示新的工具提示。如果像其他答案一样在工具提示上调用show,则即使光标没有悬停在其上方,它也会弹出。
我之所以选择此解决方案,是因为其他解决方案重新使用了现有的工具提示,导致了一些奇怪的问题,即当将光标悬停在元素上方时,工具提示有时无法显示。
function updateTooltip(element, tooltip) {
if (element.data('tooltip') != null) {
element.tooltip('hide');
element.removeData('tooltip');
}
element.tooltip({
title: tooltip
});
}
data('bs.tooltip')
的,而不是data('tooltip')
在bootstrap 4中,我仅使用,$(el).tooltip('dispose');
然后照常重新创建。因此,您可以将处置放在创建工具提示的函数之前,以确保它不会加倍。
不得不检查状态并修改值似乎不太友好。
我认为Mehmet Duran几乎是正确的,但是在使用具有相同工具提示及其位置的多个类时会出现一些问题。以下代码还避免了js错误检查,是否存在任何称为“ tooltip_class”的类。希望这可以帮助。
if (jQuery(".tooltip_class")[0]){
jQuery('.tooltip_class')
.attr('title', 'New Title.')
.attr('data-placement', 'right')
.tooltip('fixTitle')
.tooltip('hide');
}
通过直接更改元素中的文本来更改文本。(不更新工具提示位置)。
$('.tooltip-inner', $element.next()).html(newHtml);
$('.tooltip-inner', $element.next()).text(newText);
通过销毁旧的工具提示来更改文本,然后创建并显示一个新的工具提示。(导致旧的逐渐消失,新的逐渐消失)
$element
.tooltip('destroy')
.tooltip({
// Repeat previous options.
title: newText,
})
.tooltip('show');
我正在使用top方法为“保存”设置动画。消息(使用时 
,工具提示不会更改大小),并将文本更改为“完成”。(加上填充),当请求完成时。
$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. ': text = 'Saving.. '; break;
case 'Saving.. ': text = 'Saving...'; break;
case 'Saving...': text = 'Saving. '; break;
}
$('.tooltip-inner', parent).html(text);
}, 250);
send_request( function(){
// When the request is complete
clearInterval(interval_id);
$('.tooltip-inner', parent).html('Done. ');
setTimeout(function() {
$element.tooltip('hide');
}, 1500 /* Show "Done." for a bit */);
});
这对我有用:(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 <br /> message").tooltip('fixTitle');
</script>
该属性data-html="true"
允许在工具提示标题上使用html。
在经过数小时的搜索和试用后,对于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>