4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

jQuery tooltipプラグイン tipsy

Last updated at Posted at 2013-07-02

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に対応していない版だったのでどはまりしました。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?