jQuery.footnotes.js

Bootstrap.footnotes.js no Bootstrap

之前 Github 上找到一個很不錯的插件 Bootstrap.footnotes.js,但是依賴 Bootstrap,我不喜歡這樣一個效果就要引用一個 js 庫,所以就自己寫一個僅僅依賴 jQuery 的版本。
同時我已經發佈到 Github 上,是 Bootstrap.footnotes.js 的一個 fork。

在相應屬性加 class,使用 HTML5 的 DATA 設置相應文本。

<span class="sup" data-text="This's text.">Text</span>
<sup class="sup" data-text="The sup.">1<sup>

而 CSS 就要寫好一些定位的設置。三角型就使用 :after,CSS 太長所以就唔貼出,可以到我的 Github 倉庫的 footnotes.css

至於 JS 就是獲取到當前 sup 中的位置,然後再算出 彈出的提示窗口位置。

我知道這種寫法欠缺效率,但是夠直白,現在不怎麼懂的人也可以看明白。同時希望有朋友能寫一個更高效的代碼。

Github

Demo: http://kaiyuan.github.io/bootstrap.footnotes.js/sup.html