我在一个锚元素上有一个工具提示,它在单击时发送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内容。
其他回答
可以使用函数在工具提示调用中设置内容
$("#myelement").tooltip({
"title": function() {
return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
}
});
你不必只使用被调用元素的标题。
我认为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');
}
使用工具提示对象Boostrap:
$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');
谢谢这个代码对我很有帮助,我发现它对我的项目很有效
$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');
我只在bootstrap 4和w/o调用.show()中测试了这个
el.tooltip('hide').attr('data-original-title', 'message');
推荐文章
- 使用jQuery以像素为整数填充或边距值
- 检查是否选择了jQuery选项,如果没有选择默认值
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用jQuery滚动到一个div
- 在JS/jQuery中触发按键/按键/按键事件?
- 如何每5秒重新加载页面?
- getJSON调用中的错误处理
- 带引导的固定宽度按钮
- 如何用jquery或javascript排序对象数组
- 使用jQuery切换输入禁用属性
- 如何知道一个字符串开始/结束在jQuery特定的字符串?
- Twitter Bootstrap vs jQuery UI?
- 如何绑定“触摸启动”和“点击”事件,但不回应两者?
- 如何使用jQuery从URL中获得锚?
- console.log(result)输出[object对象]。我如何得到result。name?