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

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

jquery.tgClickToolTipV2

Qiitaのページ

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

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

Ver.2 を考えてみる

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

独自データ属性とは

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

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

例

[html]

1. ラピスラズリ

[/html]

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

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

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

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

各種コード / デモ

html

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

[html]

[/html]

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

JS

ではスクリプト部分

[js]
$(function(){
var dataTooltip, insertHtml;

// ツールチップ表示処理
$('.tgTtip').click(function(e){
e.preventDefault(); // hrefが無効になり、画面遷移が行わない

// クリックされた要素の"data-tooltip"（ツールチップ内容）を取得
dataTooltip = $(this).attr('data-tooltip');

// (html最後に挿入する)ツールチップ用pタグを作成
insertHtml = '

' + dataTooltip + '

';

// 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('

');
});

// "ツールチップ以外の領域"をクリックでツールチップを隠す処理
$('body').on('click', '.dummy', function(){
$('p.tgToolTip').remove();
$('p.dummy').remove();
});
});
[/js]

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

CSS

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

しかしながら

• .hide
• .dummy

は必須です。

[css]
.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;
}
[/css]

デモ

デモはコチラから

最後に

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

単純なスクリプトなので、マウスオーバー版や、独自データ属性ではなく、title や alt でも動くものがあっさりと出来そうな気がしますが、とりあえず今回はここまでということで。

自分でも使っているモノなので、機能追加などは是非、施したいと思っています。

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

2015.06.11 追記

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

-Javascript,jQuery
-Qiita, クリック, ツールチップ, マウスオーバー