ツールチップを自前で実装
したのでメモっておく。
つーかはてなブログ、CSSもJSも記事内で書けるのかスゲー。
ということで実装サンプルも置いておく。
↓実装サンプルここから
================================
ここにマウスを乗せるとピョッと出てくる
================================
↑実装サンプルここまで
ツールチップは結構いろいろな方法で実現できるようですが(末尾の参考文献を参照のこと)
今回は以下のような感じに落ち着きました。
<HTML>
<span class="tooltip-event" data-tooltip="ピョッと出てくるやつの中身"> ここにマウスを乗せるとピョッと出てくる </span>
特に変わったところはなし。
spanでなく他のタグ(divでもaでもテーブルでも)に入れ替えてもOK。
ツールチップの中身は改行入っててもOK。
ものによるけどタグもOK。
逆に言えば、タグを文字列として出したい場合はエスケープが必要になる。
<CSS>
.tooltip-body { background: #666; color: #fff; width: 400px; padding: 10px; position: absolute; text-align: left; z-index: 0; display: none; }
ツールチップ部分の見た目。
基本的に好きに変えられる。
周りのコンテンツに合わせて、z-indexは調整する必要あり。
また、フェードインに使うのでデフォルトは「display: none;」にしておく。
<jQuery>
$(".tooltip-event").hover( function(e) { var text = $(this).attr("data-tooltip"); if (text != ""){ var spantag = $("<span></span>", {id:"activetooltip", "class": "tooltip-body"}); spantag.html(text.replace(/\r\n|\r|\n/g, "<br>")); $("body")[0].appendChild(spantag[0]); $("#activetooltip").css( { 'top' : $(document).scrollTop() + e.clientY + 10, 'left': $(document).scrollLeft() + e.clientX + 10, } ); setTimeout(function(){ $("#activetooltip").animate({opacity: 'show'}, {duration: 200, easing: 'swing'}); }, 300); } }, function() { $("#activetooltip").remove(); } );
本体。
「tooltip-event」クラスを持つ要素にマウスが乗っかると動く。
以下に抜粋したところが、乗っかったときの処理。
// ツールチップの中身に入る文字列を抜き出してくる var text = $(this).attr("data-tooltip"); // 抜き出した文字列が空でないときだけツールチップを出す if (text != ""){ // ツールチップ本体となるspanタグを生成 var spantag = $("<span></span>", {id:"activetooltip", "class": "tooltip-body"}); // spanタグに、改行コードをbrタグに変換した文字列を突っ込む spantag.html(text.replace(/\r\n|\r|\n/g, "<br>")); // bodyタグの末尾に加える $("body")[0].appendChild(spantag[0]); // 表示位置を調整する(スクロール位置+マウス位置+右と下に10px) $("#activetooltip").css( { 'top' : $(document).scrollTop() + e.clientY + 10, 'left': $(document).scrollLeft() + e.clientX + 10, } ); // 300ミリ秒後に、200ミリ秒かけてフェードイン setTimeout(function(){ $("#activetooltip").animate({opacity: 'show'}, {duration: 200, easing: 'swing'}); }, 300); }
抜粋するほどでもない気はしますが、
マウスが外れたときの処理がこちら。
// activetooltipというIDの要素を削除 $("#activetooltip").remove();
参考文献
- jQuery の animate で、透明⇔不透明のアニメーション動作
- jQueryでブラウザのスクロール値を取得してみる | BlackFlag
- JavaScript - javascriptで変数にタグを追加するとそのまま文字列として表示されてしまう(79783)|teratail
- 【リンク】jQueryでツールチップ | Webデザインラボ
- コピペでできる!CSSとhtmlのみで作るツールチップ | copypet.jp|パーツで探す、web制作に使えるコピペサイト。
- jQueryのhover()を活用したマウス操作まとめ! | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト
- マウスに追従する吹き出しを表示 | 私的雑録