まず、正しい動作に必要なBootstrap 4のファイルをダウンロードしてウェブページに組み込みます。CDNを使用する場合は、以下のコードを
セクション内に追加します。<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>次に、ツールチップを表示させたい要素に data-toggle="tooltip" 属性を追加します。また、ツールチップの内容を指定するために title 属性を設定します。以下は、ボタンをクリックするとツールチップが表示される例です。
<button type="button" class="btn btn-primary" data-toggle="tooltip" title="This is a tooltip">ボタン</button>上記のコードでは、ボタン要素に btn クラスと btn-primary クラスを追加し、data-toggle="tooltip" 属性と title 属性を設定しています。
さらに、ツールチップの表示位置をカスタマイズすることもできます。例えば、ツールチップを要素の下に表示したい場合は、data-placement 属性を bottom に設定します。以下は、ボタンの下にツールチップを表示する例です。
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="This is a tooltip">ボタン</button>ツールチップの表示に関するさまざまなカスタマイズオプションやイベントトリガーも利用できます。詳細については、Bootstrap 4の公式ドキュメントを参照してください。
以上が、Bootstrap 4でツールチップを使う方法といくつかのコード例です。これを参考にして、ウェブページでユーザーに情報をわかりやすく伝えるためにツールチップを活用しましょう。