Twitter Bootstrapでツールチップの表示に関するあれこれ

Bootstrap を使うと色々と簡単にWebの表示が調整できますが、カーソルを上においた時にツールチップを表示する様な事も簡単に出来ます。

その表示に関するいくつかのテクニックをメモ。

Bootstrapでのツールチップの表示
表示位置の変更
改行したり文字を装飾したりHTML表示を使う
ツールチップの幅を広げる
ツールチップ有効化時にオプションを渡す
ツールチップを無効化、有効化する

Bootstrapでのツールチップの表示

ここではBootstrap 3を使用しています。

Tooltips · Bootstrap

まず、Botostraop関連のCSSやJavaScriptを<head>の中で読み込んで起きます。

<head>
...
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/scripts/myscript.js"></script>
...
</head>

myscript.jsは色々自分のスクリプトが入ってるものだとして、その中に

/scripts/myscript.js

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

と、ツールチップを有効化するスクリプトを入れておきます。

これで準備が出来たのでツールチップを表示させるボタンを作ってみます。

一番簡単には、data-toggleにtooltipをして titleに表示したい文字列を入れればOK。

<button class="btn btn-default" data-toggle="tooltip" title="This is tooltip.">Tooltip</button>

これでTooltipボタンの上にカーソルを持って行くと上側にツールチップが表示されます。

表示位置の変更

表示する位置はdata-placementで決められて上下左右それぞれ、top、bottom、left、rightを指定します。(デフォルトはtop。)

<button class="btn btn-default" data-toggle="tooltip" data-placement="right" title="This is tooltip.">Tooltip</button>

なら右側。

改行したり文字を装飾したりHTML表示を使う

ツールチップの表示をHTMLで装飾する事もできます。

HTMLを使うにはdata-htmlをtrueにします。

<button class="btn btn-default" data-html="true"  data-toggle="tooltip" title="This is tooltip.<br>Here is line break. <b>This is bold (&lt;b&gt;) tag.</b> <font color='red'>This is red color.</font><font size=6>Large font.</font>">Tooltip</button>

こんな感じのを作ると

こんな感じでツールチップの中で色をつけたり文字サイズを変えたり改行したり出来る様になります。

data-htmlを指定しないとタグがそのまま表示される様な状態になります。

ツールチップの幅を広げる

ツールチップは上みたいな感じで表示されますが、表示幅を変更したい場合はtooltip-innerというクラスのCSSを変更することで出来ます。

.tooltip-inner{
  max-width: 100%;
}

こんな感じで最大表示幅を変えてあげれば

こんな感じで幅広な表示にすることが出来ます。

ただし、このtooltip-innerはツールチップをつけてる要素の親要素の中に入るので、上のボタンとかが小さな幅の要素の中にいると幅狭になってしまいます。 (特に一つ要素を何らかの理由でdivとかで囲ってるとボタンと同じ幅だけになってしまったりしてしまいます。)

これを回避するためにはdata-containerにbodyなど、大きな要素を入れておくとそれの幅を見てtooltip-innerの幅を決めてくれる様になります。

<button data-container="body" class="btn btn-default" data-html="true"  data-toggle="tooltip" title="This is tooltip.<br>Here is line break. <b>This is bold (&lt;b&gt;) tag.</b> <font color='red'>This is red color.</font><font size=6>Large font.</font>">Tooltip</button>

これならTooltipボタンの親要素が小さくても画面全体をMaxとして使える様になります。

Bootstrap 2の時にはツールチップ部がbody直下に置かれる様に作られてたので常に幅広な表示だったので、 Bootstrap 3にしたら幅が狭くなった、という場合にはこんな感じで試してみると上手く行くと思います。

ツールチップ有効化時にオプションを渡す

上のdata-htmlやdata-containerに関して、最初に書いたツールチップを有効化するための関数にオプションとして渡して全ての関連する場所で有効化することも出来ます。

$(function () {
  $('[data-toggle="tooltip"]').tooltip({html: true, container: 'body'}));
})

などとすれば全てのツールチップがbodyを基準に幅を決め、htmlが有効になります。

また、titleというオプションに文章を指定しておくとデフォルトの表示を決めることも出来ます。

同じツールチップを出す必要がある場合は、各ツールチップに適当なクラスを割り当てておいて、

$(function () {
  $('.common-tips').tooltip({title: "common tips"}));
  $('.other-tips').tooltip();
})

みたいな感じでcommon-tipsというクラスを持つツールチップについてはタイトルをここで決めてしまう、みたいな事が出来ます。

.common-tipsな要素も、要素自体でtitleを指定すればそちらが優先されます。

ツールチップを無効化、有効化する

ツールチップを無効化するには

$('#tooltip').tooltip('destory'));

と、destoryという引数を入れてtooltipを呼びます。

再び有効化するには

$('#tooltip').tooltip('show'));

とします。ただ、このshowは、カーソルが該当要素の上にない場合でも表示するためのオプションで、一旦カーソルを要素の上に持って行ってはずすまで表示され続けます。

これをJavaScript側で消すには

$('#tooltip').tooltip('hide'));

とhideを使って呼んであげればOK。

また、関連としてtoggle:

$('#tooltip').tooltip('toggle'));

を使うと呼ぶたびに表示したり隠したりすることが出来ます。