アナログCPU:5108843109

ゲームと音楽とプログラミング(酒と女とロックンロールのノリで)

('ω') < イザユケエンジニャー

ツールチップを自前で実装

したのでメモっておく。

つーかはてなブログ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();

参考文献