小技巧:用Bootstrap实现空心Tooltip

Bootstrap默认的Tooltip是实心的,如果要做一个空心的Tooltip要怎么做呢?

以Tooltip在右边显示为例。

主体部分是很简单的,修改一下CSS即可:

.tooltip-inner {
    color: #000;
    background-color: #FFF;
    border: #000 solid 1px;
    text-align: left;
}

但问题在于那个小箭头还是实心的。

我研究了半天,最后修改箭头模板,用两个小箭头互相重叠实现了空心效果…略BT了,不知道还有没有更好的办法…

<span class="right" data-toggle="tooltip" data-placement="right" data-html="true" data-template
='<div class="tooltip" role="tooltip"><div class="tooltip-arrow tooltip-arrow-border"></div>
<div class="tooltip-arrow tooltip-arrow-bg"></div><div class="tooltip-inner"></div></div>' title
="tip text">label</span>

其中的data-template部分就是新的模板,与原来的默认模板区别就在于有两个tooltip-arrow,分别加了tooltip-arrow-border和tooltip-arrow-bg两个class。

这两个的CSS定义如下:

.tooltip.right .tooltip-arrow-border {
    border-right-color: #000;
}

.tooltip.right .tooltip-arrow-bg {
    left: 2px;
    border-right-color:#FFF;
}

如此即实现空心箭头的效果。