我在一个锚元素上有一个工具提示,它在单击时发送AJAX请求。该元素有一个工具提示(来自Twitter Bootstrap)。我希望在AJAX请求成功返回时改变工具提示内容。启动后如何操作工具提示?
当前回答
想改变工具提示内容/标题点击像引导文档。你注意到你复制了一个代码示例吗?我在这里使用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内容。
其他回答
对于引导3.x
这似乎是最干净的解决方案:
$(element)
.attr('data-original-title', 'New title').tooltip('show')
Show用于立即更新标题,而不是等待工具提示被隐藏并再次显示。
我不能得到任何答案工作,这里有一个变通办法:
$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);
我认为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');
}
通过直接更改元素中的文本来更改文本。(不会更新工具提示位置)。
$('.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 */);
});
可以使用函数在工具提示调用中设置内容
$("#myelement").tooltip({
"title": function() {
return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
}
});
你不必只使用被调用元素的标题。
推荐文章
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- 在jQuery中的CSS类更改上触发事件
- jQuery日期/时间选择器
- 我如何预填充一个jQuery Datepicker文本框与今天的日期?
- jQuery添加必要的输入字段
- 如何使用Twitter的Bootstrap内联显示列表
- JavaScript错误(Uncaught SyntaxError:意外的输入结束)
- navigator。gelocation。getcurrentposition有时有效有时无效
- 我如何使用jQuery按字母顺序排序一个列表?
- 如何在jQuery检索复选框值
- 停止缓存jQuery .load响应
- 为什么带有对象的typeof数组返回“对象”而不是“数组”?
- 使用jQuery动画addClass/removeClass
- 是否有可能收听“风格改变”事件?