我在一个锚元素上有一个工具提示,它在单击时发送AJAX请求。该元素有一个工具提示(来自Twitter Bootstrap)。我希望在AJAX请求成功返回时改变工具提示内容。启动后如何操作工具提示?
当前回答
对于引导3.x
这似乎是最干净的解决方案:
$(element)
.attr('data-original-title', 'New title').tooltip('show')
Show用于立即更新标题,而不是等待工具提示被隐藏并再次显示。
其他回答
如果你想在不关闭和重新打开工具提示的情况下更改文本,这里有一个很好的解决方案。
$(element).attr('title', newTitle)
.tooltip('fixTitle')
.data('bs.tooltip')
.$tip.find('.tooltip-inner')
.text(newTitle)
这样,文本替换而不关闭工具提示(不重新定位,但如果你正在做一个词的改变等应该是好的)。当你将鼠标悬停在工具提示上时,它仍然在更新。
**这是bootstrap 3,对于2,你可能需要改变数据/类名
如果你在HTML中设置了标题属性,那么在点击图标或按钮时使用 (美元).attr(“标题”,newValue);
Bootstrap 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();
}
当ajax请求成功返回时,可以使用此代码隐藏工具提示,更改其标题并再次显示工具提示。
$(element).tooltip('hide');
$(element).attr('title','this is new title');
$(element).tooltip('fixTitle');
setTimeout(function() { $(element).tooltip('show');}, 500);
在Bootstrap 3中,调用elt就足够了。attr('data-original-title', "Foo"),因为"data-original-title"属性的变化已经触发了工具提示显示的变化。
更新:您可以添加.tooltip('show')来立即显示更改,您不需要鼠标移出和鼠标悬停目标来查看标题中的更改
elt.attr('data-original-title', "Foo").tooltip('show');
推荐文章
- src和dist文件夹的作用是什么?
- jQuery。由于转义了JSON中的单引号,parseJSON抛出“无效JSON”错误
- Twitter Bootstrap 3 Sticky Footer
- 如何使用jQuery检测页面的滚动位置
- 如何在JSON中使用杰克逊更改字段名
- 如何使Bootstrap 4卡在卡列相同的高度?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使用域集图例引导
- 防止在ASP中缓存。NET MVC中使用属性的特定操作
- jQuery: keyPress退格键不火?
- XMLHttpRequest Origin null不允许Access-Control-Allow-Origin for file:/// to file:///(无服务器)
- 重置setTimeout
- jQuery有不聚焦的方法吗?
- jQuery -替换字符串中某个字符的所有实例
- Ng-repeat结束事件