Twitter Bootstrap-如何在工具提示弹出窗口和元素之间增加一些余量

问题描述

我没有尝试任何操作，因为我无法从引导程序中了解在工具提示和元素之间的空间是在哪里制作/添加的，通常情况下，工具提示确实位于触发工具提示事件的元素附近.

i have not tryed anything since i can't understand where space between tooltip and element is made/added from bootstrap, normally tooltip is really near the element who triggers the tooltip event.

我只是想使工具提示的开口距元素稍远，以增加工具提示和元素的余量.

I just would like to make the tooltip opening little bit away from the element, to add some more margin from tooltip and eleemnt i mean.

如果可能的话，我想了解如何在css中执行此操作，并且如果可能的话，可以使它同时适用于右，左，上，下工具提示

I would like to understand how to do this in css if possible and if is possible to make it both for right,left,top,bottom tooltips

希望的问题很清楚.

这是工具提示在我的应用中的外观:

This is how tooltips looks on my app:

这就是我想做的事，他们应该如何照顾

and this is what i would like to do and how should they looks after

推荐答案

这是顶部工具提示的默认CSS:

This is the default CSS for a tooltip on top :

.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}

您可以在自己的CSS中覆盖它:

You can override it in your own CSS :

.tooltip.top {
  margin-top: -10px;
}

请注意，此代码仅在顶部提供工具提示，您需要修改CSS使其适应其他3种方向:

Note this code will only work work a tooltip on top, you'll nedd to adapt the CSS for the 3 other orientations :

.tooltip.top    { margin-top: -10px; }
.tooltip.right  { margin-left: 10px; }
.tooltip.bottom { margin-top: 10px;   }
.tooltip.left   { margin-left: -10px; }

这篇关于Twitter Bootstrap-如何在工具提示弹出窗口和元素之间增加一些余量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！