jquery tooltip插件

qtip2:http://qtip2.com/

bower install qtip² // lowercase!

引入一个css和插件即可。

 <script type="text/javascript" src="/path/to/jquery.qtip.js"></script>

如果需要更多的支持，则引入相应的扩展。

qtip2下面后里面有个basic文件夹，里面的文件和外面文件名相同，但内容不同。

外面的js包含了插件Plugins: tips modal viewport svg imagemap ie6，。

而basic下面的没有包含插件。

样式:

/* Basic styles */
.qtip-light{} /* Light coloured style */
.qtip-dark{} /* Alternative dark style */
.qtip-cream{} /* Cream-esque style, similar to the default */
.qtip-red{} /* Alert-ful red style */
.qtip-green{} /* Positive green style */
.qtip-blue{} /* Informative blue style */

/* CSS3 styles */
.qtip-rounded{} /* CSS3 border-radius class for applying rounded corners to your tooltips */
.qtip-shadow{} /* CSS3 box-shadow class for applying shadows to your tooltips */
.qtip-bootstrap{} /* Twitter Bootstrap style */
.qtip-youtube{} /* Google's new YouTube style  */
.qtip-tipsy{} /* Minimalist Tipsy style */
.qtip-tipped{} /* Tipped libraries "Blue" style */
.qtip-jtools{} /* jTools tooltip style */
.qtip-cluetip{} /* Good ole' ClueTip style */

http://qtip2.com/guides

使用方法:

JavaScript String

If you just want a common piece of text shared between all your tooltips, you can supply qTip²  directly with a JavaScript String

$('a').qtip({ // Grab some elements to apply the tooltip to
    content: {
        text: 'My common piece of text here'
    }
})

(等同于:

$('.selector').qtip({ content: 'My content' });

)

title attribute

If you plan on using qTip²  as simply a very thin replacement of the browser tooltips, the title attribute is a great way to do so. It's standards compliant, it's the expected place for tooltip text, and the plugin will automaically look there for its content if none is given inside your .qtip({ ... }) config object!

$('[title]').qtip(); // Grab all elements with a title attribute, and apply qTip!
$('[title!=""]').qtip(); // A bit better. Grab elements with a title attribute that isn't blank.

This is the simplest method of using qTip² , as it requires very little setup and works to replace existing, native tooltips auto-magically!

使用参考:

http://blog.csdn.net/smartsmile2012/article/details/17169443