CSS Bootstrap 工具提示导致按钮跳转

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14364079/
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-08-29 21:20:44  来源:igfitidea点击:

Bootstrap tooltip causing buttons to jump

csstwitter-bootstraptooltip

提问by Brian Salta

When I hover over a button and the tooltip appears, the buttons jump. If I disable the tooltip, it does not jump. Additionally, the right button loses the rounded edges. How can I prevent this from happening?

当我将鼠标悬停在按钮上并出现工具提示时,按钮会跳跃。如果我禁用工具提示,它不会跳转。此外,右键失去圆角边缘。我怎样才能防止这种情况发生?

<div class="btn-group">
    <a rel="tooltip" class="btn" href="#" data-title="View Details"><i class="icon-list-alt"></i></a>
    <a rel="tooltip" class="btn" href="#" data-title="Delete"><i class="icon-trash">    </i></a>
</div> 

Javascript:

Javascript:

$('[rel=tooltip]').tooltip();

Working version...

工作版本...

http://jsfiddle.net/BA4zM/147/

http://jsfiddle.net/BA4zM/147/

Here is a website that has it working without the jumping...

这是一个网站,它可以在没有跳跃的情况下工作......

http://wrapbootstrap.com/preview/WB005S479

http://wrapbootstrap.com/preview/WB005S479

回答by Howie

To avoid the jump, you need to set the container attribute. This is documented.

为避免跳转,需要设置容器属性。这是记录在案的。

When using tooltips and popovers with the Bootstrap input groups, you'll have to set the container option to avoid unwanted side effects.

在 Bootstrap 输入组中使用工具提示和弹出框时,您必须设置容器选项以避免不必要的副作用。

Try the following:

请尝试以下操作:

$('[rel=tooltip]').tooltip({container: 'body'});

回答by Miguel M. Serrano

As Howie said at https://stackoverflow.com/a/14770263/7598367, it's necesary to add the 'container' to tooltip.

正如 Howie 在https://stackoverflow.com/a/14770263/7598367所说,有必要将“容器”添加到工具提示中。

That didn't solve my issue (I had the same problem), it's also necesary to declare at JS file BEFOREthe .tooltip() initilization, this way:

这并没有解决我的问题(我有同样的问题),还需要在.tooltip() 初始化之前在 JS 文件中声明,这样:

$('[data-toggle=tooltip]').tooltip({container: 'body'});
$('[data-toggle="tooltip"]').tooltip();

Hope this helps if somebody has the same problem in the future.

如果将来有人遇到同样的问题,希望这会有所帮助。