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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-22 00:14:52  来源:igfitidea点击:

How to keep active bootstrap tooltip without hover or click

javascriptjquerytwitter-bootstrap

提问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是工具提示位置(左侧、顶部、底部或右侧)。

Bootstrap tooltip

引导工具提示

回答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.

这样(工具提示的)父元素将忽略所有点击事件 - 因此工具提示始终可见。