我在一个锚元素上有一个工具提示,它在单击时发送AJAX请求。该元素有一个工具提示(来自Twitter Bootstrap)。我希望在AJAX请求成功返回时改变工具提示内容。启动后如何操作工具提示?
当前回答
在Bootstrap 3中,调用elt就足够了。attr('data-original-title', "Foo"),因为"data-original-title"属性的变化已经触发了工具提示显示的变化。
更新:您可以添加.tooltip('show')来立即显示更改,您不需要鼠标移出和鼠标悬停目标来查看标题中的更改
elt.attr('data-original-title', "Foo").tooltip('show');
其他回答
今天在阅读源代码时发现了这个。因此$. Tooltip (string)调用Tooltip类中的任何函数。如果你看工具提示。fixTitle,它获取data-original-title属性并用它替换title值。
所以我们简单地做:
$(element).tooltip('hide')
.attr('data-original-title', newValue)
.tooltip('fixTitle')
.tooltip('show');
当然,它会更新标题,也就是工具提示中的值。
更短的方法:
$(element).attr('title', 'NEW_TITLE')
.tooltip('fixTitle')
.tooltip('show');
如果你想在不关闭和重新打开工具提示的情况下更改文本,这里有一个很好的解决方案。
$(element).attr('title', newTitle)
.tooltip('fixTitle')
.data('bs.tooltip')
.$tip.find('.tooltip-inner')
.text(newTitle)
这样,文本替换而不关闭工具提示(不重新定位,但如果你正在做一个词的改变等应该是好的)。当你将鼠标悬停在工具提示上时,它仍然在更新。
**这是bootstrap 3,对于2,你可能需要改变数据/类名
下面是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');
从用户体验方面,你只看到文本被改变,没有褪色或隐藏/显示效果,也不需要_fixTitle。
引导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>
我只在bootstrap 4和w/o调用.show()中测试了这个
el.tooltip('hide').attr('data-original-title', 'message');
推荐文章
- 它是可能的动画scrollTop与jQuery?
- 我需要哪个选择器来选择一个文本选项?
- 如何添加ID属性Html.BeginForm()在asp.net mvc?
- 在推特引导2中添加提交按钮图标
- 如何获得<html>标签html与JavaScript / jQuery?
- 如何禁用ts规则为特定的行?
- 检测浏览器自动填充
- jQuery的小写和大写
- 遍历<select>选项
- jQuery滚动到页面底部/iframe
- 使用jQuery选择前“n”项
- 在ASP中使用jQuery渲染局部视图。NET MVC
- Jquery如果div id有子
- 如何使用jQuery获取一个表单元格值?
- 如何使用jQuery去一个URL ?