小开

最佳答案

今天在阅读源代码时发现了这个。因此$.tooltip(string)调用Tooltip类中的任何函数。如果你看一下Tooltip.fixTitle，它会获取data-original-title属性并用它替换标题值。

所以我们简单地做:

$(element).tooltip('hide')
.attr('data-original-title', newValue)
.tooltip('fixTitle')
.tooltip('show');

当然，它会更新标题，也就是工具提示中的值。

更短的方法:

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

小开

如果工具提示已经实例化(可能用javascript)，这是有效的:

$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');

小开

下面的工作对我来说是最好的，基本上我废弃了任何现有的工具提示，不麻烦显示新的工具提示。如果像在其他答案中一样调用工具提示上的show，即使光标没有悬停在它上面，它也会弹出。

我选择这个解决方案的原因是，其他解决方案重用了现有的工具提示，导致了一些奇怪的问题，当鼠标悬停在元素上方时，工具提示有时不显示。

function updateTooltip(element, tooltip) {
if (element.data('tooltip') != null) {
element.tooltip('hide');
element.removeData('tooltip');
}
element.tooltip({
title: tooltip
});
}

小开

我认为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方法来动画“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 */);
});

小开

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

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

你不必只使用被调用元素的标题。

小开

如果你想在不关闭和重新打开工具提示的情况下更改文本，这里有一个很好的解决方案。

$(element).attr('title', newTitle)
.tooltip('fixTitle')
.data('bs.tooltip')
.$tip.find('.tooltip-inner')
.text(newTitle)

这样，文本替换而不关闭工具提示(不重新定位，但如果你正在做一个词的改变等应该是好的)。当你将鼠标悬停在工具提示上时，它仍然在更新。

**这是bootstrap 3，对于2，你可能需要改变数据/类名

小开

在引导3中，调用elt.attr('data-original-title', "Foo")就足够了，因为"data-original-title"属性的变化已经触发了工具提示显示的变化。

更新:你可以添加.tooltip('show')来立即显示更改，你不需要将鼠标移出和鼠标悬停在目标上来查看标题中的更改

elt.attr('data-original-title', "Foo").tooltip('show');

小开

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

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

小开

销毁任何已存在的工具提示，以便我们可以用新的工具提示内容重新填充

$(element).tooltip("destroy");
$(element).tooltip({
title: message
});

小开

你可以在不调用show/hide的情况下更新工具提示文本:

$(myEl)
.attr('title', newTitle)
.tooltip('fixTitle')
.tooltip('setContent')

小开

我不能得到任何答案工作，这里有一个变通办法:

$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);

小开

对于引导3.x

这似乎是最干净的解决方案:

$(element)
.attr('data-original-title', 'New title').tooltip('show')

Show用于立即更新标题，而不是等待工具提示被隐藏并再次显示。

小开

你可以使用下面的代码更改data-original-title:

$(element).attr('data-original-title', newValue);

小开

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

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

小开

这对我来说很有效:(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。

小开

在bootstrap 4中，我只是使用$(el).tooltip('dispose');，然后像往常一样重新创建。所以你可以把dispose放在创建工具提示的函数之前，以确保它不会折叠。

不得不检查状态和修补值似乎不太友好。

小开

Bootstrap 4:

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

小开

使用工具提示对象Boostrap:

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

小开

我用这个简单的方法:

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

小开

$(this).attr('data-original-title', 'click here to publish')
.tooltip('fixTitle')
.tooltip('show');

如果你需要在使用attr 'data-original-title'初始化一个工具提示后更改它的文本，这很有用。

小开

引导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>

小开

对于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>

小开

下面是引导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');

从用户体验方面，你只看到文本被改变了，没有淡入或隐藏/显示效果，并且不需要_fixTitle。

小开

我只测试了引导4 &W /o调用.show()

el.tooltip('hide').attr('data-original-title', 'message');

小开

如果你在HTML中设置了标题属性，那么在点击图标或按钮时使用 (美元).attr(“标题”,newValue); < / >强

小开

我用ajax动态更改工具提示中的标题。

首先启用工具提示:

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

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

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

小开

引导5不再有fixTitle或_fixTitle，所以我必须处理整个Tooltip对象并重建它:

$('a.copy').click(function() { var tt = bootstrap.Tooltip.getInstance(this); tt.dispose(); this.setAttribute('title', 'Copied!') tt = bootstrap.Tooltip.getOrCreateInstance(this); tt.show(); }

小开

想要像引导文档一样更改工具提示内容/标题< >强onclick < / >强。你注意到你复制了一个代码示例吗?我在这里使用Bootstrap v5…

<span id="tooltip" class="btn btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip content">Tooltip</span>

在进入下一步之前，确保你已经启用 Bootstrap5工具提示

$('#tooltip').click(function() { $(this).attr('data-original-title', 'Content changed!').tooltip('show'); $(this).attr('data-original-title', 'Tooltip content'); });

当你将鼠标悬停在这个跨度元素上时，它将显示工具提示内容。当你点击它时，它会变成内容改变了!，并返回默认标题工具提示内容。

小开

引导5.2.0

引导版本5.2.0现在有setContent方法在初始化后更改工具提示标题。https://getbootstrap.com/docs/5.2/components/tooltips/#methods

var tooltip = bootstrap.Tooltip.getInstance('#elementId'); tooltip.setContent({ '.tooltip-inner': 'another title' });

小开

如果你有多个动态变化的工具提示，请不要使用.tooltip('show')，参见下面的例子，将下面的所有元素悬停1秒，然后鼠标离开，你会看到意想不到的结果

$('[data-toggle="tooltip"]').tooltip() $('[data-toggle="tooltip"]').mouseover((e) => { let self = $(e.target); setTimeout(function() { // ajax call self.attr('data-original-title', 'New Value of ' + self.text()) .tooltip('show'); }, 3000); })

span{margin: 20px;font-weight: bold}

<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"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <span data-toggle="tooltip" title="Text 1">Text 1</span> <span data-toggle="tooltip" title="Text 2">Text 2</span> <span data-toggle="tooltip" title="Text 3">Text 3</span>

更好的方法是编辑data-original-title和.tooltip-inner

$('[data-toggle="tooltip"]').tooltip() $('[data-toggle="tooltip"]').mouseover((e) => { let self = $(e.target); setTimeout(function() { // ajax call let newValue = 'New Value of ' + self.text(); self.attr('data-original-title', newValue) $('.tooltip-inner').html(newValue) }, 3000); })

span{margin: 20px;font-weight: bold}

<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"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <span data-toggle="tooltip" title="Text 1">Text 1</span> <span data-toggle="tooltip" title="Text 2">Text 2</span> <span data-toggle="tooltip" title="Text 3">Text 3</span>

在点击时更改Twitter引导提示内容

引导4

引导5.2.0