编程是一门艺术

raptor.zh(at)gmail.com Creative Commons License
本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。

archives 存档

01 Jan - 31 Dec 2018
01 Jan - 31 Dec 2017
01 Jan - 31 Dec 2016
01 Jan - 31 Dec 2015
01 Jan - 31 Dec 2014
01 Jan - 31 Dec 2013
01 Jan - 31 Dec 2012
01 Jan - 31 Dec 2011
01 Jan - 31 Dec 2010
01 Jan - 31 Dec 2009
01 Jan - 31 Dec 2008
01 Jan - 31 Dec 2007
01 Jan - 31 Dec 2006
01 Jan - 31 Dec 2005
01 Jan - 31 Dec 2004
01 Jan - 31 Dec 2003
01 Jan - 31 Dec 2002
01 Jan - 31 Dec 2001
01 Jan - 31 Dec 2000
01 Jan - 31 Dec 1999

--

links 链接

--

小技巧:用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;
}

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

Trackback link:

Please enable javascript to generate a trackback url

No trackbacks

评论(0)


 
   
 
  表情图标 

 


提示: 除了 <b> 和 <i> 之外,其他的Html标签都将从您的评论中去除.url或mail地址会被自动加上链接.