發現一款好用的jquery插件（tooltipster實用的工具提示插件）
我們平時在開發web的時候會有類似圖標，按鈕或者a鏈接點擊跳轉等操作。為了交互上的友好會有類似title的提示，可是往往瀏覽器默認的都太醜了，於是去網上搜了一些好看的插件，推擠比較多的是：Tooltip ，插件是受 Jason Frame 寫的 jQuery.tipsy 的啟發。可是不懂為什麽，我下載安裝以後用不了，各種報錯不能理解；好吧，然後放棄直接用了bootstrap的按需引入，壓縮版的 bootstrap.min.js。因為我本身沒有使用bootstrap-ui框架，引入後導致各種樣式沖突，提示框簡直醜到離譜。
然後發現了：tooltipster 。http://www.jq22.com/jquery-info14735 官網：http://down.admin5.com/demo/code_pop/28/72/
他也是jquery開發的一款ui插件，但是我覺得相比較其他提示工具更加簡單好用，功能強大，樣式選擇性也比較多！！！
下載下來後是一個文件裏面主要用到js和css文件裏的東西，需要用到的什麽都有，你可以有選擇的去引入：
我這裏用到的是這幾個文件給大家看下引入方式：jquery我因為引在外面了，所以這裏沒有放
<head> <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/resources/new/js/tooltipster/tooltipster.bundle.min.css"> <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/resources/new/js/tooltipster/tooltipster-follower.min.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/resources/new/js/tooltipster/tooltipster.bundle.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/resources/new/js/tooltipster/tooltipster-follower.min.js"></script> <script> $(document).ready(function() { $(‘.tooltip‘).tooltipster({ plugins: [‘follower‘] }); }); </script> </head>
官方推薦方法：
1. 引入jQuery和Tooltipster‘s文件
<head> <link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script> <script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js"></script> </head>
兼容提醒: jQuery 1.7已經足夠了,除非你需要SVG兼容IE(需要使用jQuery 1.10+). Tooltipster 不能正常運行在IE9中引用jQuery1.8
2. 設置你的HTML
想讓一個元素加入工具提醒, 我們會給他加上一個類名class ‘tooltip‘ . 你也可以選擇使用自定義的類名或選擇器(請繼續往下看), 由你決定. 之後, 我們將設置標題title 屬性為我們想要的提示. 這裏有幾個例子:
<!-- 首頁 -->
<span class="Setupbut tooltip" title="首頁">
<a href="javaScript:homePage();">
<img src="${pageContext.request.contextPath}/resources/new/${sessionScope.skin }/image/0.png">
</a>
</span>
註意：如果您使用Twitter‘s Bootstrap，請使用另一個類名，因為“工具提示”會產生沖突。
3. 激活 Tooltipster：直接寫在script標簽裏就可以了
<script> $(document).ready(function() { $(‘.tooltip‘).tooltipster(); }); </script>
效果就是這樣：
4. 定義你的tooltips風格
第一個是默認樣式, Tooltipster還為你提供另外五種主題風格：Default Light Borderless Punk Noir Shadow
要使用這些主題,需要引用一個css文件 (他的路徑是 css/plugins/tooltipster/sideTip/themes 文件裏) 在你的頁面並指定其名稱在Tooltipster‘s 選項
$(‘.tooltip‘).tooltipster({
theme: ‘tooltipster-noir‘ //使用Noir主題
});
你可以通過修改tooltips的樣式達到你想要的效果
5. 使用插件
我這裏選擇的是跟隨鼠標：tooltipster-follower https://github.com/louisameline/tooltipster-follower
<script> $(document).ready(function() { $(‘.tooltip‘).tooltipster({ plugins: [‘follower‘] }); }); </script>
無論你鼠標移動到目標元素什麽位置，提示都會跟著鼠標移動。
發現一款好用的jquery插件（tooltipster實用的工具提示插件）