BootstrapのTooltipの中身を途中で変更する

Twitter BootstrapのTooltipで、中身を変更する方法を書いていきたいと思います。やりたいことは、hover中にtooltipを表示させ、クリックしたらそのtooltip内のテキストを変更する、というものです。

まず、tooltipのベーシックな使い方は次の通りです。htmlはこんな感じ。

<span id="basic" data-toggle="tooltip" title="Tooltip Text">
    ここにカーソルをのせると
</span>

そして、javascriptはこうです。

$(function(){
    $('#basic').tooltip();
});

この要素にカーソルをのせると、titleで指定した文字が浮かび上がります。

さて、hover時とclick時でtitleを変えるには、次のようにします。まずはhtmlから。

<span id="sample">
    ここにカーソルを重ねたりクリックすると
</span>

そして、javascript。

$(function(){

    $('#sample').tooltip({
        trigger: 'manual'
        , animation: false
    });

    $('#sample').hover(function(){
        $(this).attr('title', 'Hover')
            .tooltip('fixTitle')
            .tooltip('show');
    }, function(){
        $(this).tooltip('hide');
    });

    $('#sample').click(function(){
        $(this).attr('title', 'Clicked!')
            .tooltip('fixTitle')
            .tooltip('show');
    });

});

こうすると、hover時、click時で、次のようにtooltipの内容が変わります。

javascriptでどういうことをしているかを簡単に説明します。

まず、最初にオプションの設定をしています。triggerは、どういうタイミングでtooltipを表示させるかを指定するものです。hoverやclickなどを指定できますが、ここでは自分で設定するのでmanualを指定しています。また、animationは切っておきます。

hover時、click時は基本的に同じことをしています。まず、title属性を変更します。そして、それをtooltipの設定に反映するために、fixTitleを実行します。そしてshowすると、tooltipの中身が変更されます。hoverの2つ目の設定は、hoverがoffになったときの処理です。triggerにmanualを指定していたので、自分でhide処理を書きます。

前の記事：

wordpressテーマ作成をする環境をvccwで構築する手順

次の記事：

[ Excel ] 一度にたくさんのセルの値を結合したい