Bootstrap - ツールチップ：初級者のガイド

こんにちは、将来のウェブ開発者たち！今日は、Bootstrapのツールチップの素晴らしい世界に飛び込みます。あなたの親切な近所のコンピュータ教師として、私はこの旅をステップバイステップで案内します。コードを書いたことがない人も心配しないでください - 最初から始めて、少しずつ進んでいきます。で、コーヒー（またはお気に入りの飲み物）を飲みながら、始めましょう！

ツールチップとは？

本題に入る前に、ツールチップとは何かを理解しましょう。ウェブサイトのアイコンやテキストにマウスを-pointerを合わせて、追加情報が表示される小さなポップアップを見たことがありますか？那就是ツールチップです！メインコンテンツを邪魔しないで追加のコンテキストや説明を提供する小さなヘルパーのようなものです。

ツールチップを有効にする

では、コードを少し弄ってみましょう。まず最初に、Bootstrapでツールチップを有効にします。心配しないでください、思ったよりも簡単です！

<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

この小さなスクリプトは、Bootstrapに「このページでツールチップを使いたい」と伝えます。暗い部屋でライトをオンにするのと同じようなものです。

ツールチップを作成する

まず最初のツールチップを作成しましょう。HTML要素にいくつかの属性を追加するだけです：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="私はツールチップ！">
上に-pointerを合わせてください
</button>

以下は何が起きているかです：

• Bootstrapのbtnとbtn-secondaryクラスを使ってボタンを作成しています。
• data-toggle="tooltip"は、この要素にツールチップを表示するように伝えます。
• title="私はツールチップ！"は、ツールチップに表示されるテキストです。

このボタンに-pointerを合わせると、「私はツールチップ！」というテキストが表示されます。魔法のように感じますよね？

リンクにツールチップを追加する

ツールチップはボタンだけでなく、リンクにも追加できます：

<a href="#" data-toggle="tooltip" title="クリックしてどこかへ移動！">このリンクに-pointerを合わせてください</a>

これはボタンの例と同じように動作します。リンクに-pointerを合わせると、ツールチップメッセージが表示されます。

カスタムツールチップ

少し凝ったことをしてみましょう。ツールチップをカスタマイズしてより興味深くします：

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true"
title="<em>ツールチップ</em> <u>with</u> <b>HTML</b>">
HTMLツールチップを表示
</button>

この例では、data-html="true"を追加して、ツールチップにHTMLを使えるようにしました。<em>、<u>、<b>などのタグを使ってツールチップのテキストをスタイル化できます。

ツールチップの配置

ツールチップが要素に対してどこに表示されるかを制御できます。すべての4つの位置を試してみましょう：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="上のツールチップ">
上にツールチップを表示
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="右のツールチップ">
右にツールチップを表示
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="下のツールチップ">
下にツールチップを表示
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="左のツールチップ">
左にツールチップを表示
</button>

data-placement属性は、ツールチップの配置場所をBootstrapに伝えます。友達に写真撮影の際にどこに立つか指示するのと同じです！

カスタムHTMLのツールチップ

先ほどツールチップにHTMLを有効にした方法を見ましたが、さらに進めてみましょう：

<button type="button" class="btn btn-danger" data-toggle="tooltip" data-html="true"
title="<h3>カスタムヘッダー</h3><p>これはパラグラフです。</p><img src='smiley.gif' alt='笑顔'>">
サプライズを表示
</button>

このツールチップには、ヘッダー、パラグラフ、そして画像が含まれています！ツールチップの中にミニウェブページがあるようなものです。

マークアップ

時々、ツールチップの構造をより細かく制御したい場合があります。その場合、カスタムマークアップを使います：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-template='<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' title="カスタムツールチップ">
カスタムツールチップマークアップ
</button>

この例では、data-template属性を使ってツールチップのカスタム構造を定義しています。家を買う代わりに自分で建てるようなものです！

非活性要素のツールチップ

通常、非活性要素はユーザーインタラクションを引き起こしません。しかし、少しだけトリックを使うことで、非活性要素でもツールチップを動作させることができます：

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="非活性ツールチップ">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>非活性ボタン</button>
</span>

非活性ボタンをspanでラップし、フォーカスを受け取れるようにしています。棚の上に届かないものを助けるようなものです！

オプション

最後に、ツールチップをさらにカスタマイズするために使用できるいくつかのオプションを見てみましょう：

オプション	タイプ	デフォルト	説明
animation	boolean	true	ツールチップにCSSのフェードトランジションを適用
container	string | false	false	ツールチップを特定の要素に追加
delay	number | object	0	ツールチップの表示と非表示の遅延（ミリ秒）
html	boolean	false	ツールチップにHTMLを許可
placement	string | function	'top'	ツールチップの配置方法
selector	string	false	セレクターが提供されている場合、ツールチップオブジェクトは指定されたターゲットに委譲されます
template	string	<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>	ツールチップを作成する際に使用する基本HTML
title	string | element | function	''	title属性がない場合のデフォルトのタイトル値
trigger	string	'hover focus'	ツールチップが引き発される方法 - click | hover | focus | manual

これらのオプションを使ってツールチップを初期化します：

$('#example').tooltip({
animation: false,
delay: { "show": 500, "hide": 100 },
placement: 'right'
});

このコードは、フェードアニメーションをオフにし、表示と非表示に遅延を追加し、ツールチップを要素の右側に配置します。

そして、ここまででBootstrapのツールチップの初めてのステップを踏みました。これをマスターするための鍵は練習です。ウェブページを作成し、さまざまなタイプのツールチップを追加して実験してみてください。オプションを試してみて、何が作れるかを見てください。

間もなく、あなたはツールチップのマスターになり、あなたのウェブページは情報豊かでインタラクティブになります！楽しくコーディングを続け、道中で楽しみましょう！

Credits: Image by storyset