「クリックしたらツールチップを表示するスクリプト」のバージョン2を作ってみた
2019/12/14
以前作成した「クリックしたらツールチップを表示するスクリプト」がQiitaでいい感じに改造されていたのに影響を受け、もう少しだけ上手に書いた(と思う) バージョン2がようやく出来上がったので晒してみたいと思います。
jquery.tgClickToolTipV2
Qiitaのページ
Qiitaの該当ページはこちらから。
https://qiita.com/mrd-takahashi/items/4f27927ced6275b16969
まさか Qiita でワタシのスクリプトがネタになるとは思いませんでした。
しかし読めばなるほど、なるほどですね。
Ver.2 を考えてみる
ではどういう形が良いのか。
もうちょっと汎用性のあるモノにしたいし、どうせななら Qiita にて書かれているコードとは差別化したいって事を考えながら、こういう形がイイかなと、html5 の独自データ属性（date-*）を使うことにしました。
独自データ属性とは
一言で説明すると、以下のようなデータです。
HTML 要素の属性として定義されていない、Webページや Webアプリケーションに固有の独自データを格納することを想定したもので、定義するには「data-」で始まり、ハイフンの後に少なくとも1文字が必要。
データを自由に持たせられる箱、という風に噛み砕けるのではないかと思います。
例
|
1 2 3 |
<ol> <li data-length="4m00s">ラピスラズリ</li> </ol> |
上記の場合は『楽曲「ラピスラズリ」の曲の長さ』という意味で「data-length」という独自データを持たせています。
独自データ属性については、以下に詳しくまとめられています。
各種コード / デモ
html
ということで、htmlの該当部分
|
1 2 3 4 5 6 |
<table> <tr> <th>タイトル <a href="#" class="tgTtip" data-tooltip="タイトルの説明"><span class="tooltip1">?</span></a></th> <td><input type="text" name="title"></td> </tr> </html> |
「note1」を下の方に書いて使うというのをやめ、ツールチップ用のリンクに直接表示したいテキストを data-tooltip 要素に埋めるようにしてみました。
コチラのほうが汎用性があるかもとの判断です。
改行にも対応させています。
JS
ではスクリプト部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
$(function(){ var dataTooltip, insertHtml; // ツールチップ表示処理 $('.tgTtip').click(function(e){ e.preventDefault(); // hrefが無効になり、画面遷移が行わない // クリックされた要素の"data-tooltip"（ツールチップ内容）を取得 dataTooltip = $(this).attr('data-tooltip'); // (html最後に挿入する)ツールチップ用pタグを作成 insertHtml = '<p class="tgToolTip">' + dataTooltip + '</p>'; // pタグをhtmlの最後に挿入 $('body').append(insertHtml); // クリックされた [?] アイコンの座標を取得 var position = $(this).position(); var newPositionTop = position.top +30; // +数値で下方向へ移動 var newPositionLeft = position.left + 35; // +数値で右方向へ移動 // 出現するツールチップの位置を調整 $(".tgToolTip").css({'top': newPositionTop + 'px', 'left': newPositionLeft + 'px'}); // (ツールチップの非表示処理) 非表示なクリック領域を展開 $('body').append('<p class="dummy"></p>'); }); // "ツールチップ以外の領域"をクリックでツールチップを隠す処理 $('body').on('click', '.dummy', function(){ $('p.tgToolTip').remove(); $('p.dummy').remove(); }); }); |
クリックしてもページの先頭へ移動しないようになっています。
今考えると、結構重要なことなんですけど、なぜ処理してなかったのか…。
CSS
最後にCSS。主に装飾しているだけなので、さほど重要ではありませんが、一応。
しかしながら
- .hide
- .dummy
は必須です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.hide{ display: none; } a.tgTtip { margin: 0; text-decoration: none; font-size: 1em; } /* クリック元装飾 */ span.tooltip1 { color: #fff; text-align: center; padding: 0 0.5em; background-color: green; border-radius: 5px; -moz-border-radius: 5px; } /* クリック元装飾(2) */ span.tooltip2 { background-color: #ccc; } /* ツールチップ本体 */ p.tgToolTip { margin: 0; padding: 0.5em 1em; background-color: #666; border: 3px solid #000; color: #fff; border-radius: 5px; -moz-border-radius: 5px; min-height: 1em; top: 100px; left: 20px; position: absolute; z-index: 100; } .dummy { width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 0; } |
デモ
デモはコチラから
https://lightning-bolt.xyz/js/jquery.tgClickToolTipV2/
最後に
もうちょっと早く作れれば良かったのですが、ようやく出来ました。
もっと書き方てのはあると思いますが、この辺りがワタシの限界なので、また Qiita 等でまとめてくれる方が出てくることを願います。
単純なスクリプトなので、マウスオーバー版や、独自データ属性ではなく、title や alt でも動くものがあっさりと出来そうな気がしますが、とりあえず今回はここまでということで。
自分でも使っているモノなので、機能追加などは是非、施したいと思っています。
最後に mrd-takahashi 様、ありがとうございました。
2015.06.11 追記
クリックに続き、マウスオーバーで動作するものも作ってみました。
中身は結構、クリック版と似通っているので、カスタマイズもそこそこ簡単ではないかと思います。
コチラからどうぞ。