我在一个锚元素上有一个工具提示,它在单击时发送AJAX请求。该元素有一个工具提示(来自Twitter Bootstrap)。我希望在AJAX请求成功返回时改变工具提示内容。启动后如何操作工具提示?
当前回答
当ajax请求成功返回时,可以使用此代码隐藏工具提示,更改其标题并再次显示工具提示。
$(element).tooltip('hide');
$(element).attr('title','this is new title');
$(element).tooltip('fixTitle');
setTimeout(function() { $(element).tooltip('show');}, 500);
其他回答
通过直接更改元素中的文本来更改文本。(不会更新工具提示位置)。
$('.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.”消息(使用 ,这样工具提示的大小不会改变),并将文本更改为“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. ': text = 'Saving.. '; break;
case 'Saving.. ': text = 'Saving...'; break;
case 'Saving...': text = 'Saving. '; break;
}
$('.tooltip-inner', parent).html(text);
}, 250);
send_request( function(){
// When the request is complete
clearInterval(interval_id);
$('.tooltip-inner', parent).html('Done. ');
setTimeout(function() {
$element.tooltip('hide');
}, 1500 /* Show "Done." for a bit */);
});
在bootstrap 4中,我只使用$(el).tooltip('dispose');然后像往常一样重新创建。所以你可以把dispose放在创建工具提示的函数之前,以确保它不会折叠。
不得不检查状态和修补值似乎不太友好。
$(this).attr('data-original-title', 'click here to publish')
.tooltip('fixTitle')
.tooltip('show');
如果你需要在使用attr 'data-original-title'初始化一个工具提示后更改它的文本,这很有用。
引导5.2.0
Bootstrap版本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' });
使用工具提示对象Boostrap:
$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');
推荐文章
- 如何在svg元素中使用z索引?
- 字体很棒,输入类型为“submit”
- 如何求一个数的长度?
- 使用jQuery获取第二个孩子
- 如何在引导栏中居中内容?
- IE8问题推特引导3
- .append(), prepend(), .after()和.before()
- 在不使用LESS的情况下更改引导导航栏折叠断点
- 如何将JavaScript文件链接到HTML文件?
- 如何对齐一个图像死中心与bootstrap
- jQuery的窗口大小调整
- 找到jQuery中所有未选中的复选框
- 在Javascript/jQuery中创建两个数字之间的所有整数数组,包括
- 它是可能的动画scrollTop与jQuery?
- 我需要哪个选择器来选择一个文本选项?