twitter-bootstrap Twitter Bootstrap - 如何在工具提示弹出窗口和元素之间添加更多边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15601451/
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
Twitter Bootstrap - how to add some more margin between tooltip popup and element
提问by itsme
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.
我只是想让工具提示稍微远离元素，以便从工具提示和元素中添加更多边距，我的意思是。
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
如果可能的话，我想了解如何在 css 中执行此操作，并且是否可以将其同时用于右侧、左侧、顶部、底部工具提示
Hope question is clear.
希望问题很清楚。
This is how tooltips looks on my app:
这是工具提示在我的应用程序上的显示方式：
and this is what i would like to do and how should they looks after
这就是我想做的事情以及他们应该如何照顾
回答by zessx
This is the default CSS for a tooltip on top :
这是顶部工具提示的默认 CSS：
.tooltip.top {
padding: 5px 0;
margin-top: -3px;
}
You can override it in your own CSS :
您可以在自己的 CSS 中覆盖它：
.tooltip.top {
margin-top: -10px;
}
Note this code will only work work a tooltip on top, you'll nedd to adapt the CSS for the 3 other orientations :
请注意，此代码仅适用于顶部的工具提示，您需要针对其他 3 个方向调整 CSS：
.tooltip.top { margin-top: -10px; }
.tooltip.right { margin-left: 10px; }
.tooltip.bottom { margin-top: 10px; }
.tooltip.left { margin-left: -10px; }
回答by Aduku
This will work for bootstrap 4v
这适用于bootstrap 4v
The class names have changed quite dramatically:
类名发生了相当大的变化：
- .bs-tooltip-bottom
- .bs-tooltip-top
- .bs-tooltip-right
- .bs-tooltip-left
- .bs-工具提示底部
- .bs-工具提示顶部
- .bs-tooltip-right
- .bs-tooltip-left
example:
例子：
.bs-tooltip-bottom {
margin-top: 10px;
}
回答by algorhythm
Here is the complete Bootstrap 4 solution
这是完整的 Bootstrap 4 解决方案
.bs-tooltip-top {
top: -10px !important;
}
.bs-tooltip-right {
left: 10px !important;
}
.bs-tooltip-bottom {
top: 10px !important;
}
.bs-tooltip-left {
left: -10px !important;
}
回答by Miljan Puzovi?
In bootstrap.css you will find this code:
在 bootstrap.css 中，您将找到以下代码：
.tooltip.top {
padding: 5px 0;
margin-top: -3px;
}
.tooltip.right {
padding: 0 5px;
margin-left: 3px;
}
.tooltip.bottom {
padding: 5px 0;
margin-top: 3px;
}
.tooltip.left {
padding: 0 5px;
margin-left: -3px;
}
Change or override margins to change distance of tooltip from hovered elements.
更改或覆盖边距以更改工具提示与悬停元素的距离。
I.E. To set bigger distance for top position of tooltip, set .tooltip.topclass like this:
IE 要为工具提示的顶部位置设置更大的距离，请.tooltip.top像这样设置类：
.tooltip.top {
padding: 5px 0;
margin-top: -70px;
}
