我在一个锚元素上有一个工具提示,它在单击时发送AJAX请求。该元素有一个工具提示(来自Twitter Bootstrap)。我希望在AJAX请求成功返回时改变工具提示内容。启动后如何操作工具提示?
当前回答
下面是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。
其他回答
我认为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');
}
想改变工具提示内容/标题点击像引导文档。你注意到你复制了一个代码示例吗?我在这里使用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');
});
当您将鼠标悬停在这个span元素上时,它将显示工具提示内容。当你点击它,这将改变内容更改!并将返回默认标题Tooltip内容。
$(this).attr('data-original-title', 'click here to publish')
.tooltip('fixTitle')
.tooltip('show');
如果你需要在使用attr 'data-original-title'初始化一个工具提示后更改它的文本,这很有用。
谢谢这个代码对我很有帮助,我发现它对我的项目很有效
$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');
下面的工作对我来说是最好的,基本上我废弃了任何现有的工具提示,不麻烦显示新的工具提示。如果像在其他答案中一样调用工具提示上的show,即使光标没有悬停在它上面,它也会弹出。
我选择这个解决方案的原因是,其他解决方案重用了现有的工具提示,导致了一些奇怪的问题,当鼠标悬停在元素上方时,工具提示有时不显示。
function updateTooltip(element, tooltip) {
if (element.data('tooltip') != null) {
element.tooltip('hide');
element.removeData('tooltip');
}
element.tooltip({
title: tooltip
});
}
推荐文章
- 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结束事件