qtip2官網：
http://qtip2.com/download
基本教學：
jQuery版本：1.6以上，特別注意由於1.9版移除了$.browser所以若要確保使用上沒問題可以使用最新版來解決這個問題。
官網靜態html範例：
<html><head><title>My site</title><!-- CSS file --><link type="text/css" rel="stylesheet" href="/path/to/jquery.qtip.css" />
</head>
<body>
<!-- jQuery FIRST i.e. before qTip (and all other scripts too usually) -->
<script type="text/javascript" src="/path/to/jquery.min.js"></script>
<!-- Include either the minifed or production version, NOT both!! -->
<script type="text/javascript" src="/path/to/jquery.qtip.js"></script>
<!-- Optional: imagesLoaded script to better support images inside your tooltips -->
<script type="text/javascript" src="/path/to/jquery.imagesloaded.pkg.min.js"></script>
</body>
</html>
----20140619----待續
$("#idname").qtip({
content: {
text: 'qtip所顯示出來的文字也可以在此使用html標籤。<br><button type="button" id="btn1">了解</button>'
},
show: {
ready: true
},
hide: {
event: 'fixed'
},
position: {
my: 'top center',
at: 'bottom center',
target: false
},
style: {
classes: 'qtip-bootstrap'
}
});
參數說明可參考官網：http://qtip2.com/options
position 這部分特別重要，因為關係到你想顯示的位置，可參考官網這張圖
圖片來源：http://qtip2.com/
留言列表
