完全滿足需求，輕量級 tooltips 提示插件：popper.js

Sponsor

Popper.js 是一個擴展性較好的 tooltips 提示類 JS 插件，不需要依賴 jQuery 庫，大小僅為 3.5KB 左右，使用與配置相當簡單，若你的 Web 網站有這個需要，可以嘗試使用這個該特效插件。

JS 插件名稱：popper.js
下載地址：?https://popper.js.org/

下面我們來看看這個 JS 提示類代碼插件的用法與功能介紹。

一、自定義提示方向

可隨意設置上下左右顯示，簡單一行代碼，就能設置

代碼，把 left 修改為對應的方向文字即可。

var popper = new Popper(referenceElement, onPopper, {
  placement: ‘left’
});

二、滾動容器顯示

這個不好描述，大家還是看 DEMO 圖吧：

代碼加入??boundariesElement: container 即可：

var popper = new Popper(referenceElement, onLeftPopper, {
  placement: ‘left’,
  boundariesElement: container
});

三、支持拖拽移動

拖拽元素時，Tooltips 提示內容會自動粘附于被拖拽的容器。

代碼：

var popper = new Popper(referenceElement, onLeftPopper, {
  placement: ‘left’,
  flipBehavior: [‘left’, ‘bottom’, ‘top’],
  boundariesElement: container
});

四、超出瀏覽器邊界，自動切的方向

有時間因為內容置于網頁邊緣，導致 Tooltips 的提示不能完整顯示，而 Popper.js 就解決了這個問題。

代碼：

var popper = new Popper(referenceElement, onBottomPopper, {
  placement: ‘bottom’
});

總結

總的來說，這個插件是很適合用在網站上，功能基本夠用，如需查看更多參數介紹，請到該 JS 插件的官方網站查看。

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。