我在一个锚元素上有一个工具提示,它在单击时发送AJAX请求。该元素有一个工具提示(来自Twitter Bootstrap)。我希望在AJAX请求成功返回时改变工具提示内容。启动后如何操作工具提示?
当前回答
我只在bootstrap 4和w/o调用.show()中测试了这个
el.tooltip('hide').attr('data-original-title', 'message');
其他回答
想改变工具提示内容/标题点击像引导文档。你注意到你复制了一个代码示例吗?我在这里使用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内容。
在bootstrap 4中,我只使用$(el).tooltip('dispose');然后像往常一样重新创建。所以你可以把dispose放在创建工具提示的函数之前,以确保它不会折叠。
不得不检查状态和修补值似乎不太友好。
如果工具提示已经实例化(可能用javascript),这是有效的:
$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');
我用ajax动态更改工具提示中的标题。
首先启用工具提示: $(“[data-toggle = "提示"]”).tooltip () 然后更改title属性,然后重新初始化工具提示
$(“#foo”).attr('title','TheNewTitle'); $('[data-toggle=“tooltip”]').tooltip('dispose'); $('[data-toggle=“tooltip”]').tooltip()
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();
}
推荐文章
- 它是可能的动画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 ?