Html 如何让 Twitter Bootstrap 工具提示看起来像弹出框（没有标题行）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16303636/
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 can I make Twitter Bootstrap tooltips look like the popovers (without the title line)?
提问by Ryan
I'd like to replace the Twitter Bootstrap tooltip styleswith the popover styles. How can I do that?
我想用popover 样式替换Twitter Bootstrap 工具提示样式。我怎样才能做到这一点？
Tooltips look like this by default:
默认情况下，工具提示如下所示：
Popovers look like this by default:
默认情况下，弹出窗口如下所示：
I'd like my tooltips to be white, with a gray border, just like the popovers.
我希望我的工具提示是白色的，带有灰色边框，就像弹出框一样。
Can you help?
你能帮我吗？
采纳答案by Ryan
Here's how I got it to work:
这是我如何让它工作的：
Add to variables.less
添加到 variables.less
@tooltipArrowOuterWidth: @tooltipArrowWidth + 1;
@tooltipArrowOuterColor: rgba(0,0,0,.25);
Add to custom LESS file
添加到自定义 LESS 文件
// Tooltip
// --------------------------------------------------
.tooltip.in { .opacity(100); }
.tooltip-inner {
background:@popoverTitleBackground;
color:@gray;
}
.tooltip .arrow {
border-width: @tooltipArrowOuterWidth;
}
.tooltip {
position: absolute;
top: 0;
left: 0;
z-index: @zindexPopover;
display: none;
max-width: 276px;
padding: 1px;
text-align: left; // Reset given new insertion method
background-color: @popoverBackground;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
.border-radius(6px);
.box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
white-space: normal;
// Offset the popover to account for the popover arrow
&.top { margin-top: -10px; }
&.right { margin-left: 10px; }
&.bottom { margin-top: 10px; }
&.left { margin-left: -10px; }
}
.tooltip-inner {
margin: 0; // reset heading margin
padding: 4px 8px;
font-size: @baseFontSize * 0.9;
font-weight: normal;
line-height: 18px;
background-color: @popoverTitleBackground;
border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
.border-radius(5px 5px 0 0);
&:empty {
display: none;
}
}
// Arrows
//
// .arrow is outer, .arrow:after is inner
.tooltip .tooltip-arrow,
.tooltip .tooltip-arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip .tooltip-arrow {
border-width: @tooltipArrowOuterWidth;
}
.tooltip .tooltip-arrow:after {
border-width: @tooltipArrowWidth;
content: "";
}
.tooltip {
&.top .tooltip-arrow {
left: 50%;
margin-left: -@tooltipArrowOuterWidth;
border-bottom-width: 0;
border-top-color: #999; // IE8 fallback
border-top-color: @popoverArrowOuterColor;
bottom: -@tooltipArrowOuterWidth;
&:after {
bottom: 1px;
margin-left: -@tooltipArrowWidth;
border-bottom-width: 0;
border-top-color: @tooltipArrowColor;
}
}
&.right .tooltip-arrow {
top: 50%;
left: -@tooltipArrowOuterWidth;
margin-top: -@tooltipArrowOuterWidth;
border-left-width: 0;
border-right-color: #999; // IE8 fallback
border-right-color: @tooltipArrowOuterColor;
&:after {
left: 1px;
bottom: -@tooltipArrowWidth;
border-left-width: 0;
border-right-color: @tooltipArrowColor;
}
}
&.bottom .tooltip-arrow {
left: 50%;
margin-left: -@tooltipArrowOuterWidth;
border-top-width: 0;
border-bottom-color: #999; // IE8 fallback
border-bottom-color: @tooltipArrowOuterColor;
top: -@tooltipArrowOuterWidth;
&:after {
top: 1px;
margin-left: -@tooltipArrowWidth;
border-top-width: 0;
border-bottom-color: @tooltipArrowColor;
}
}
&.left .tooltip-arrow {
top: 50%;
right: -@tooltipArrowOuterWidth;
margin-top: -@tooltipArrowOuterWidth;
border-right-width: 0;
border-left-color: #999; // IE8 fallback
border-left-color: @tooltipArrowOuterColor;
&:after {
right: 1px;
border-right-width: 0;
border-left-color: @tooltipArrowColor;
bottom: -@tooltipArrowWidth;
}
}
}
回答by philipcdavis
If you want to change the style for the tooltip itself you would have to edit the .tooltip-innerclass in bootstrap's css file or override the .tooltip-innerclass with a class of your own.
如果要更改工具提示本身的样式，则必须编辑.tooltip-inner引导程序的 css 文件中的.tooltip-inner类或使用您自己的类覆盖该类。
An example for the border would be:
边界的一个例子是：
.tooltip-inner {
border: solid 1px #ccc;
}
回答by S. Newsham
JQuery UI is interfering with bootstrap.
JQuery UI 干扰引导程序。
They aren't really compatible with each other as they overlap in a lot of functionality.
它们实际上并不兼容，因为它们在许多功能上重叠。
I had this problem a few weeks back and found this page but I didn't want to start adding custom css for something that should 'just work'. After removing JQuery UI today (for another reason) I noticed the tool-tips started looking as intended. I know this is an old question but I would have found this answer useful a few weeks ago.
几周前我遇到了这个问题并找到了这个页面，但我不想开始为应该“正常工作”的东西添加自定义 css。今天（出于另一个原因）删除 JQuery UI 后，我注意到工具提示开始看起来像预期的那样。我知道这是一个老问题，但几周前我会发现这个答案很有用。
回答by Oleg
Since the best answer was hiding in the comments to the question and wasn't visible at first, I've ended up finding out the solution on my own. It was easiest way in my case to use popover instead of tooltip with triggering it on hover event. In order to do that you have 2 options:
由于最佳答案隐藏在问题的评论中并且一开始不可见，因此我最终自己找到了解决方案。在我的情况下，最简单的方法是使用 popover 而不是工具提示，并在悬停事件上触发它。为此，您有 2 个选择：
You may use attribute 'data-trigger':
您可以使用属性“数据触发器”：
<td id="3" data-content="Tooltip text" data-placement="bottom" data- container="body" data-trigger="hover" data-original-title="" title="">This tooltiped</span></td>
or use option 'trigger' on popover initialization:
或在弹出窗口初始化时使用选项“触发器”：
$('.payment').popover({
trigger: "hover",
})
回答by Schneider
JS
JS
$(function() {
$('[title]').attr("data-rel", "tooltip");
$("[data-rel='tooltip']")
.attr("data-placement", "top")
.attr("data-content", function() {
return $(this).attr("title")
})
.removeAttr('title');
var showPopover = function() {
$(this).popover('show');
};
var hidePopover = function() {
$(this).popover('hide');
};
$("[data-rel='tooltip']").popover({
trigger: 'manual'
}).click(showPopover).hover(showPopover, hidePopover);
});
And simple HTML
又简单 HTML
<h1 title="This is title">What is this</h1>
回答by doronorenstein
Here is what worked for me on a right-side tooltip.
这是在右侧工具提示上对我有用的内容。
I just took a CSS triangle of the same size as the arrow, and then pulled it away from the Bootstrap triangle by the same distance as the width of the border. Adapt as needed, and you can refer to this awesome article for reference on how to make a triangle pointing in any direction:
我只是取了一个与箭头大小相同的 CSS 三角形，然后将它从 Bootstrap 三角形中拉出与边框宽度相同的距离。根据需要进行调整，您可以参考这篇很棒的文章，以获取有关如何使三角形指向任何方向的参考：
http://css-tricks.com/snippets/css/css-triangle/
http://css-tricks.com/snippets/css/css-triangle/
.tooltip .tooltip-inner {
background: white;
color: black;
border: 3px solid black;
padding: 10px;
line-height: 1.65em;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -15px;
border-right-color: white;
border-width: 15px 15px 15px 0;
}
.tooltip.right .tooltip-arrow:after {
content: " ";
position: absolute;
z-index: -1;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid black;
top: -15px;
left: -3px;
}
