twitter-bootstrap 如何在不悬停或单击的情况下保持活动引导工具提示
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/39099894/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to keep active bootstrap tooltip without hover or click
提问by Vishnu Bhadoriya
This is example which i am using for keep open tooltip without hover or click but its not working any other suggestion
这是我用来在没有悬停或点击的情况下保持打开工具提示的示例,但它没有任何其他建议
<a href="#" title="Download Excel" class="tool_tip">Download Excel</a>
my jquery for tooltip keep active
我的工具提示的 jquery 保持活动状态
<script>
$('.tool_tip').tooltip({trigger: 'manual'}).tooltip('show');
</script>
回答by Alan Jurczak
Try adding
尝试添加
data-toggle="tooltip" data-placement="right"
to your html:
到您的 html:
<a href="#" data-toggle="tooltip" data-placement="right" title="Download Excel" class="tool_tip">Download Excel</a>
https://jsfiddle.net/404c3fxb/
https://jsfiddle.net/404c3fxb/
Or, you can do it with jQuery, for all the elements you want to, with a class selector:
或者,您可以使用 jQuery 为您想要的所有元素使用类选择器执行此操作:
$('.tool_tip')
.attr('data-toggle', 'tooltip')
.attr('data-placement', 'right')
.tooltip({
trigger: 'manual'
})
.tooltip('show');
https://jsfiddle.net/404c3fxb/1/
https://jsfiddle.net/404c3fxb/1/
Where data-placementis the tooltip location (left, top, bottom or right).
其中data-placement是工具提示位置(左侧、顶部、底部或右侧)。
回答by El Bandito Dorito
Bootstrap 4.x - JS
Bootstrap 4.x - JS
$('#IDENTIFIER').css({'pointer-events': 'none'}).tooltip('show');
$('#IDENTIFIER').css({'pointer-events': 'none'}).tooltip('show');
Bootstrap 4.x - CSS
Bootstrap 4.x - CSS
#IDENTIFIER# { pointer-events: none; }
#IDENTIFIER# { pointer-events: none; }
This way the parent-element (of the tooltip) will ignore all click-events - so the tooltip is always visible.
这样(工具提示的)父元素将忽略所有点击事件 - 因此工具提示始终可见。

