ブートストラッププロンプトボックスを設定する方法

Bootstrapは、要素の情報プロンプトボックスを提供します。設定は次のとおりです。データトグル属性を追加し、テキストをプロンプトします。 Bootstrap JavaScriptライブラリをロードします。プロンプトボックスプラグインを初期化します。

ブートストラッププロンプトボックスのセットアップ

Bootstrapは、ユーザーが要素を押したりクリックしたりしたときに情報を表示するためのプロンプトボックスコンポーネントを提供します。プロンプトボックスをセットアップするには、次の手順を実行する必要があります。

1. HTMLタグを追加します

data-toggle="tooltip"属性を追加し、プロンプトボックスを表示する要素にプロンプ​​トテキストを追加します。

 <code class="html"><button type="button" class="btn btn-primary" data-toggle="tooltip" title="提示文本">按钮</button></code>

2。ブートストラップJavaScriptライブラリをロードします

ページにBootstrap JavaScriptライブラリを含めてください。

 <code class="html"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script></code>

3。初期化プロンプトボックス

Tooltipクラスを使用して、プロンプトボックスを初期化します。

 <code class="javascript">$(function () { $('[data-toggle="tooltip"]').tooltip(); });</code>

プロンプトボックスの外観をカスタマイズします

CSSをカスタマイズすることにより、プロンプトボックスの外観を変更できます。たとえば、プロンプトボックスの色を変更できます。

 <code class="css">.tooltip-inner { background-color: #000; }</code>

プロンプトボックスオプションを構成します

dataプロパティを変更して、プロンプトボックスオプションを構成できます。たとえば、プロンプトボックスの配置を変更できます。

 <code class="html"><button type="button" class="btn btn-primary" data-toggle="tooltip" title="提示文本" data-placement="top">按钮</button></code>

利用可能なオプションは次のとおりです。

• placement ：プロンプトボックスの配置（ top 、 right 、 bottom 、 leftなど）
• trigger ：プロンプトボックスをトリガーするイベント（ hover 、 focus 、 clickなど）
• delay ：プロンプトボックスの遅延は、ミリ秒で表示され、隠されている
• html ：プロンプトボックスにHTMLコンテンツを含めることを許可します

例

次のコードには、完全にカスタマイズされたプロンプトボックスが表示されます。

 <code class="html"><button type="button" class="btn btn-primary" data-toggle="tooltip" title="提示文本" data-placement="top" data-trigger="click" data-delay="500" data-html="true">按钮</button></code>

 <code class="css">.tooltip-inner { background-color: #000; color: #fff; }</code>

 <code class="javascript">$(function () { $('[data-toggle="tooltip"]').tooltip(); });</code>

以上がブートストラッププロンプトボックスを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。