jQueryのtooltipを表示するプラグインを探してたところ見つけた。
数年前のプラグインのようだけど、tooltipをただ単に表示したい時には必要十分な感じだった。
オフィシャルはここなのかな
tipsy
ページ最下部にDownloadとGithubのリポジトリURLが乗ってます。DLページの方はjQueryオフィシャルのプラグインページに飛ぶけど、古いのでGithubから落としたほうが楽。
適当なところで落としてくるとバージョンが古かったりしてハマったので注意した方がいいかも。
jquery.jsとjquery.tipsy.jsを読みこめば、最低限以下で使える。
tipsy
<span id="hoge" title="hoge">jquery object</span>
<script type="text/javascript">
$(function() {
$("#hoge").tipsy({
gravity: 's'
});
});
</script>
対象のjQueryオブジェクトをマウスオーバーすると、title要素の値が表示されます。
titleが無いと何も表示されません。
与えるオブジェクトの中身を変更すればいろいろ変えられるみたい。
デフォルトでは以下になっている模様。
default
$.fn.tipsy.defaults = {
className: null,
delayIn: 0,
delayOut: 0,
fade: false,
fallback: '',
gravity: 'n',
html: false,
live: false,
offset: 0,
opacity: 0.8,
title: 'title',
trigger: 'hover'
};
対象の要素をappendする時は
live: true
としてやれば反応してくれます。
liveな辺りから古い感じがしますね。
どこかからバージョンが古いのを捕まえてきたらしく、liveに対応していない版だったのでどはまりしました。