鼠標工具提示js庫 · 前端代碼筆記

[TOC] ## 來源地址 [https://github.com/ALNY-AC/mTips](https://github.com/ALNY-AC/mTips) ## 預覽地址：[https://alny-ac.github.io/mTips/index.html](https://alny-ac.github.io/mTips/index.html) ## [](https://github.com/ALNY-AC/mTips#%E5%87%86%E5%A4%87)準備下載：[https://codeload.github.com/ALNY-AC/mTips/zip/master](https://codeload.github.com/ALNY-AC/mTips/zip/master) ## [](https://github.com/ALNY-AC/mTips#%E5%AE%89%E8%A3%85)安裝將下載后的`mTips.js`文件放到項目下，在需要的頁面中導入。 > 此項目依賴JQuery.js，在使用前需要引入JQuery。 > > 需要導入的文件在dist文件夾下 ## [](https://github.com/ALNY-AC/mTips#%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8)簡單使用第一步：在頁面導入`mTips.js` 第二步：給標簽添加屬性`data-mtpis` ~~~html <div data-mtpis='寫入提示文本'></div> ~~~ 完成，快去看看吧！可以插入html代碼。 > 不導入css樣式文件一樣可以顯示，如果想要更多的樣式，就需要導入css文件，這一點在下文可以看到。 ## [](https://github.com/ALNY-AC/mTips#%E6%B3%A8%E6%84%8F)注意 > 提示功能可能無法給動態生成的頁面元素添加提示，但是這種情況已經修復。 ## [](https://github.com/ALNY-AC/mTips#%E4%BD%BF%E7%94%A8)使用 ### [](https://github.com/ALNY-AC/mTips#%E9%80%9A%E8%BF%87%E5%B1%9E%E6%80%A7%E5%BC%80%E5%90%AF)通過屬性開啟 ~~~html <div data-mtpis='提示文本'></div> ~~~ 給任意標簽添加`data-mtpis`屬性即可讓此標簽擁有鼠標工具提示功能。如果想修改提示的文本，只需要修改`data-mtpis`屬性的值即可。 ### [](https://github.com/ALNY-AC/mTips#%E9%80%9A%E8%BF%87js%E5%BC%80%E5%90%AF)通過js開啟通過js打開提示： ~~~js mTips.s(JQelement,'通過js控制的提示,并帶有回調函數'); ~~~ 通過js關閉提示： ~~~js mTips.h(); ~~~ 實例： ~~~js //==================================== $('#app0').on('mouseenter', function(e) { //鼠標進入事件，顯示提示 mTips.s($(this),'通過js控制的提示,并帶有回調函數'); }); $('#app0').on('mouseleave', function(e) { //鼠標離開事件，移除提示 mTips.h(); }); ~~~ `s()`函數第一個參數必須是一個JQuery對象。 ### [](https://github.com/ALNY-AC/mTips#%E9%80%9A%E8%BF%87%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AE%E6%A0%B7%E5%BC%8F)通過屬性設置樣式如果想要使用樣式，必須在頁面導入`mTips.css`文件通過添加屬性`data-mtpis-style`并設置屬性值來完成樣式的設置 ~~~html <div data-mtpis='提示文本' data-mtpis-style='樣式'></div> ~~~ 共五種樣式，其中`default`是默認樣式，如果需要用默認樣式，不需要單獨設置。 ~~~html <div data-mtpis='提示文本' data-mtpis-style='default'></div> <div data-mtpis='提示文本' data-mtpis-style='success'></div> <div data-mtpis='提示文本' data-mtpis-style='info'></div> <div data-mtpis='提示文本' data-mtpis-style='warning'></div> <div data-mtpis='提示文本' data-mtpis-style='danger'></div> ~~~ > 配色參考bootstrap ### [](https://github.com/ALNY-AC/mTips#%E9%80%9A%E8%BF%87js%E8%AE%BE%E7%BD%AE%E6%A0%B7%E5%BC%8F)通過js設置樣式在第二個參數中傳入樣式參數 ~~~js mTips.s($(this),'提示文本', '樣式參數'); ~~~ ## [](https://github.com/ALNY-AC/mTips#%E6%80%BB%E7%BB%93)總結 ### [](https://github.com/ALNY-AC/mTips#api)API 當工具提示顯示后，會調用回調函數，如果有的話。 "\[\]"：方括號代表參數可選 |：豎線代表參數1或參數2或參數… ~~~js /* * 參數1：JQuery對象 * 參數2：想要顯示的文本或html代碼 * 參數3：想要顯示的樣式 * 參數4：鼠標進入并且樣式顯示完成后調用的函數 */ mTips.s($(this),'提示文本',['樣式參數'|function],[function]); /* * 參數1：提示元素消失后調用的函數 */ mTips.h(function); ~~~ ### [](https://github.com/ALNY-AC/mTips#%E5%B1%9E%E6%80%A7%E5%88%97%E8%A1%A8)屬性列表 ~~~html <div data-mtpis='提示文本' data-mtpis-style='樣式'></div> ~~~ * data-mtpis：用于顯示的提示文本 * data-mtpis-style：用于設置提示的樣式 ### [](https://github.com/ALNY-AC/mTips#%E6%A0%B7%E5%BC%8F%E5%88%97%E8%A1%A8)樣式列表 * default * success * info * warning * danger ### [](https://github.com/ALNY-AC/mTips#%E9%85%8D%E7%BD%AE%E9%A1%B9)配置項 ~~~js mTips.c.x //鼠標 x 的偏移量，默認是20 mTips.c.y //鼠標 y 的偏移量，默認是20 mTips.c.style //提示組件的樣式，json格式，一般不需要修改 ~~~ ## [](https://github.com/ALNY-AC/mTips#%E8%87%AA%E5%AE%9A%E4%B9%89)自定義可以在css中添加一個自己喜歡的樣式類，然后在函數傳入樣式類名即可，但是定義樣式的時候必須添加`mTips-`作為前綴，以免和其他樣式混合，并且在傳入樣式類名的時候不需要將前綴傳入。