Eyecatch jQuery

Javascript,jQuery

「クリックしたらツールチップを表示するスクリプト」のバージョン2を作ってみた

2015/06/11

以前作成した「クリックしたらツールチップを表示するスクリプト」がQiitaでいい感じに改造されていたのに影響を受け、もう少しだけ上手に書いた(と思う) バージョン2がようやく出来上がったので晒してみたいと思います。

jquery.tgClickToolTipV2

Qiitaのページ

Qiitaの該当ページはこちらから。

jQuery - 『クリックしたらツールチップを表示するスクリプト』をちょっと変えてみた。 - Qiita

まさかQiitaでtoogieのスクリプトがネタになるとは思いませんでした。
しかし読めばなるほど、なるほどですね。

Ver.2 を考えてみる

ではどういう形が良いのか。
もうちょっと汎用性のあるモノにしたいし、どうせなならQiitaにて書かれているコードとは差別化したいって事を考えながら、こういう形がイイかなと、html5 の独自データ属性(date-*)を使うことにしました。

独自データ属性とは

一言で説明すると、以下のようなデータです。

HTML要素の属性として定義されていない、WebページやWebアプリケーションに固有の独自データを格納することを想定したもので、定義するには「data-」で始まり、ハイフンの後に少なくとも1文字が必要。
データを自由に持たせられる箱、という風に噛み砕けるのではないかと思います。

上記の場合は『楽曲「ラピスラズリ」の曲の長さ』という意味で「data-length」という独自データを持たせています。

独自データ属性については、以下に詳しくまとめられています。

独自データ属性 - グローバル属性 - HTML5 タグリファレンス - HTML5.JP

HTML5における独自データ属性の取り扱い - Qiita

html

ということで、htmlの該当部分

「note1」を下の方に書いて使うというのをやめ、ツールチップ用のリンクに直接表示したいテキストを data-tooltip 要素に埋めるようにしてみました。
コチラのほうが汎用性があるかもとの判断です。
改行にも対応させています。

JS

ではスクリプト部分

クリックしてもページの先頭へ移動しないようになっています。
今考えると、結構重要なことなんですけど、なぜ処理してなかったのか…。

CSS

最後にCSS。主に装飾しているだけなので、さほど重要ではありませんが、一応。

しかしながら

  • .hide
  • .dummy

は必須です。

デモ

デモはコチラから

最後に

もうちょっと早く作れれば良かったのですが、ようやく出来ました。
もっと書き方てのはあると思いますが、この辺りがtoogieの限界なので、またQiita等でまとめてくれる方が出てくることを願います。

単純なスクリプトなので、マウスオーバー版や、独自データ属性ではなく、title や alt でも動くものがあっさりと出来そうな気がしますが、とりあえず今回はここまでということで。
自分でも使っているモノなので、機能追加などは是非、施したいと思っています。

最後に mrd-takahashi 様、ありがとうございました。

2015.06.11 追記

クリックに続き、マウスオーバーで動作するものも作ってみました。
中身は結構、クリック版と似通っているので、カスタマイズもそこそこ簡単ではないかと思います。

コチラからどうぞ。
jquery.tgHoverToolTipV2 デモ

jQueryクックブック

jQueryクックブック

jQuery Community Experts

価格 : 3,888円

     

-Javascript,jQuery
-, , , ,