my blog my blog

Monthly 4月 2013
bootstrap的tooltip需要手动激活才会生效

 

我说怎么按照官方的代码写都不出效果呢,你妹,原来tooltip要手动激活的好不好,还有那个popover,需要tooltip跟手动激活。

下面来说说那个tooltip的使用,先引用下官方的原话:

  1. For performance reasons,  
  2. the tooltip and popover data-apis are opt in,  
  3. meaning you must initialize them yourself. 

翻译过来就是:出于性能原因的考虑,tooltip和popover的data-apis是可选的,这就意味着你必须手动初始化它们。好吧,手动就手动吧,让人好伤感的手动,而且也没有预留的可选api,就自己写了一个最简单的,js新手,能用就好了。

打开bootstrap.js,搜索tooltip,然后在tooltip的最后添加如下代码:

  1. /* TOOLTIP API 
  2.  * =================== */  
  3. $('a[data-toggle=tooltip]').mouseover(function() { 
  4.  $(this).tooltip('show'); 
  5.   }) 

然后使用方法是:

  1. <a href="#" data-toggle="tooltip" title="http://www.nenew.net">奶牛博客</a> 

在a标签中增加data-toggle=“tooltip”,title为描述,然后就可以看到tooltip的效果了。

PS:JQuery确实好用很多,比如依据tag的选择,而且代码更加简练,好吧,希望有时间可以细致的学习下,最近看了好多东西,脑子有点儿乱,实现一样是一样吧。