小技巧：用Bootstrap实现空心Tooltip

发布 by 猛禽 需要1分钟读完

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;
}

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