Bootstrap でツールチップを使用するにはどうすればよいですか?プロンプトコンポーネントの使用法の簡単な分析-ブートストラップのチュートリアル-php.cn

ポップオーバー

ツールチップ

これを一般クラスと組み合わせて、より多くの効果を作成できます。

ホームページ

ウェブフロントエンド

ブートストラップのチュートリアル

Bootstrap でツールチップを使用するにはどうすればよいですか?プロンプトコンポーネントの使用法の簡単な分析

青灯夜游

Dec 07, 2021 pm 07:12 PM

bootstrap ツールチップ

Bootstrap でプロンプトツールを使用する方法は?次の記事では、Bootstrap5 でのポップアッププロンプトとツールチップコンポーネントの使用方法を紹介します。

Bootstrap でツールチップを使用するにはどうすればよいですか?プロンプトコンポーネントの使用法の簡単な分析

2 つのコントロール: ポップオーバーとツールチップについて説明します。これら 2 つのコンポーネントには 1 つの機能があり、非常に簡単に使用できます。多くの類似点があります。 [関連する推奨事項: 「ブートストラップチュートリアル」]

ポップオーバー

1 例

1.1 注意事項

ポップオーバープラグインを使用する際の注意事項:

このプラグインが動作するには、bootstrap.bundle.min.js に依存する必要があります。
パフォーマンス上の理由から、ポップオーバーはオプションであるため、自分で初期化する必要があります。

1.2 どこでもポップオーバーを有効にする

ページ上のすべてのポップオーバーを初期化する 1 つの方法は、data-bs-toggle 属性を使用してポップオーバーを選択することです。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>Popovers</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" 
            class="btn btn-lg btn-danger" 
            data-bs-toggle="popover" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            点此按钮弹出提示
        </button>
        
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
        var popoverTriggerList = [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle="popover"]&#39;))
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
        })
     </script>
  </body>
</html>

ログイン後にコピー

Bootstrap でツールチップを使用するにはどうすればよいですか?プロンプトコンポーネントの使用法の簡単な分析

1.3 コンテナオプションの使用

親要素の特定のスタイルがポップオーバーを妨げる場合は、カスタムコンテナを指定する必要があります。ポップオーバーの HTML がその要素に表示されることを確認します。ボタンクラスに example-popover が追加されている点を除いて、この表示と上記の表示に違いはありません。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>Popovers</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" 
            class="btn btn-lg btn-danger example-popover" 
            data-bs-toggle="popover" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            点此按钮弹出提示
        </button>
        
      </div>
     <script  ></script>
     <script>
        var popover = new bootstrap.Popover(document.querySelector(&#39;.example-popover&#39;), {
            container: &#39;body&#39;
            })
     </script>
  </body>
</html>

ログイン後にコピー

id を使用することもできます。そのほうが理解しやすいと思います

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>Popovers</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" 
            id="example-popover"    
            class="btn btn-lg btn-danger" 
            data-bs-toggle="popover" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            点此按钮弹出提示
        </button>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
        var popover = new bootstrap.Popover(document.querySelector(&#39;#example-popover&#39;), {
            container: &#39;body&#39;
            })
     </script>
  </body>
</html>

ログイン後にコピー

2 ポップアップの方向を変更します

usポップアッププロンプト情報は、上、右、下、左の 4 方向に作成できます。使い方も非常に簡単で、data-bs-placement="position" を button 属性に追加するだけで、位置は上、下、左、右のいずれかになります。

なお、表示位置に十分なスペースがないと、自動的に適切な位置を見つけて表示されます。ブラウザを開くと、以下のように表示されます。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>Popovers</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" 
            class="btn btn-lg btn-danger" 
            data-bs-toggle="popover" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            默认
        </button>

        <button type="button" 
            class="btn btn-lg btn-danger" 
            data-bs-toggle="popover" 
            data-bs-placement="top" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            上部
        </button>

        <button type="button" 
            class="btn btn-lg btn-danger" 
            data-bs-toggle="popover" 
            data-bs-placement="bottom" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            下部
        </button>

        <button type="button" 
            class="btn btn-lg btn-danger" 
            data-bs-toggle="popover" 
            data-bs-placement="left" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            左侧
        </button>

        <button type="button" 
            class="btn btn-lg btn-danger" 
            data-bs-toggle="popover" 
            data-bs-placement="right" 
            title="提示标题" 
            data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
            右侧
        </button>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
        var popoverTriggerList = [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle="popover"]&#39;))
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
        })
     </script>
  </body>
</html>

ログイン後にコピー

Bootstrap でツールチップを使用するにはどうすればよいですか?プロンプトコンポーネントの使用法の簡単な分析

3 どこでも再度閉じます

デフォルトでは、ボタンをクリックするとプロンプトメッセージが表示されます。メッセージを非表示にするには、このボタンをもう一度クリックします。そうでない場合、メッセージは常に表示されます。任意の場所を再度クリックして、前に表示されたプロンプト情報を閉じたい場合は、ボタンに data-bs-trigger="focus" 属性を追加し、trigger: 'focus を追加する必要があります。 js ファイル '.

正しいクロスブラウザーおよびクロスプラットフォームの動作を実現するには、button タグの代わりに a タグを使用し、tabindex 属性も含める必要があります。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>Popovers</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <a tabindex="0" 
        class="btn btn-lg btn-danger" 
        role="button" data-bs-toggle="popover" 
        data-bs-trigger="focus" 
        title="提示标题" 
        data-bs-content="你想告诉别人些什么提示？你可以写在这里！"   >
        点此按钮弹出提示，点击空白处提示消失
    </a>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
        var popoverTriggerList = [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle="popover"]&#39;))
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
        trigger: &#39;focus&#39;
        })
     </script>
  </body>
</html>

ログイン後にコピー

Bootstrap でツールチップを使用するにはどうすればよいですか?プロンプトコンポーネントの使用法の簡単な分析

ツールチップ

ツールチップはポップオーバーに非常によく似ており、ロードすることを選択した場合は初期化する必要があります。あなた自身。その表示も予約されたスペースに応じて自動的に調整されます。ポップアップヒントとは異なり、ツールヒントはボタンの上にマウスを置くと表示され、マウスを離すとクリックすることなく自動的に非表示になります。

1 ツールヒント検証コード

は基本的にポップアッププロンプトに似ています。このコードは、ツールチップが有効になります。

var tooltipTriggerList = [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle="tooltip"]&#39;))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})

ログイン後にコピー

2 ツールヒントの例

ツールヒントは通常、ボタンやリンクでその機能を説明するために使用されます。画像で使用されています。 title の値はマウスホバー時に表示されるコンテンツであり、html 要素を使用できます。

リンクにはデフォルトのタイトル属性があり、そのプロンプトテキストがブラウザのステータスバーに表示されます。この表示はより直感的です。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>工具提示</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="这个是按钮提示">
          按钮提示
          </button>
          <a href="#" data-bs-toggle="tooltip" title="这个是链接提示">链接提示</a>

      </div>
     <script  ></script>
     <script>
      var tooltipTriggerList = [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle="tooltip"]&#39;))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
      })
   </script>
  </body>
</html>

ログイン後にコピー

Bootstrap でツールチップを使用するにはどうすればよいですか?プロンプトコンポーネントの使用法の簡単な分析

3 ツールヒントの表示位置

ポップアップヒントと同様に 4 つのツールヒントの方向をそれぞれサポートします。上、下、左、右。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>吐司消息</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="顶部提示">
          顶部提示
          </button>
          <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="右侧提示">
          右侧提示
          </button>
          <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="底部提示">
          底部提示
          </button>
          <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="左侧提示">
          左侧提示
          </button>

      </div>
     <script  ></script>
     <script>
      var tooltipTriggerList = [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle="tooltip"]&#39;))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
      })
   </script>
  </body>
</html>

ログイン後にコピー

Bootstrap でツールチップを使用するにはどうすればよいですか?プロンプトコンポーネントの使用法の簡単な分析

4 記事内のヒントに使用されます

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>吐司消息</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <div class="bd-example tooltip-demo">
            <p>
                最近<a href="#" data-bs-toggle="tooltip" title="哔哩哔哩">B站</a> 是迎来了自己12周年的纪念日，
                之前吧，B站做过好些<a href="#" data-bs-toggle="tooltip" title="点此查看流行语盘点内容">流行语盘点</a>，
                比如“awsl”一类的词，不少朋友都刷过，甚至有的<a href="#" data-bs-toggle="tooltip" title="相当于现代典故">梗</a>还出圈了，
                像是后那个什么浪一类的，我留意到B站官方很多时候还会做一些相关的科普盘点啥的，时不时有推送。
            </p>
          </div>
      </div>
     <script  ></script>
     <script>
      var tooltipTriggerList = [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle="tooltip"]&#39;))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
      })
   </script>
  </body>
</html>

ログイン後にコピー

Bootstrap でツールチップを使用するにはどうすればよいですか?プロンプトコンポーネントの使用法の簡単な分析

これを一般クラスと組み合わせて、より多くの効果を作成できます。

両方のプロンプトのテキスト部分では、HTML とブートストラップの一般クラスを使用して、間隔、レイアウト、フォント、色などを設定できます。自分で試すことができます。よりクールな効果を生み出すために。

ブートストラップの詳細については、ブートストラップの基本チュートリアルをご覧ください。！

以上がBootstrap でツールチップを使用するにはどうすればよいですか?プロンプトコンポーネントの使用法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7322

Java チュートリアル

1625

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

Eclipseにブートストラップを導入する方法 Apr 05, 2024 am 02:30 AM

5 つのステップで Eclipse に Bootstrap を導入します。 Bootstrap ファイルをダウンロードして解凍します。 Bootstrap フォルダーをプロジェクトにインポートします。ブートストラップの依存関係を追加します。 Bootstrap CSS と JS を HTML ファイルにロードします。ブートストラップの使用を開始して、ユーザーインターフェイスを強化します。

アイデアをブートストラップに導入する方法 Apr 05, 2024 am 02:33 AM

IntelliJ IDEA に Bootstrap を導入する手順: 新しいプロジェクトを作成し、「Web アプリケーション」を選択します。「Bootstrap」Maven 依存関係を追加します。 HTML ファイルを作成し、ブートストラップ参照を追加します。 Bootstrap CSS ファイルへの実際のパスに置き換えます。 HTML ファイルを実行してブートストラップスタイルを使用します。ヒント: CDN を使用して、ブートストラップをインポートしたり、HTML ファイルテンプレートをカスタマイズしたりできます。

大型モデル間の1対1バトル75万ラウンド、GPT-4が優勝、Llama 3が5位にランクイン Apr 23, 2024 pm 03:28 PM

Llama3 に関しては、新しいテスト結果が発表されました。大規模モデル評価コミュニティ LMSYS は、Llama3 が 5 位にランクされ、英語カテゴリでは GPT-4 と同率 1 位にランクされました。このリストは他のベンチマークとは異なり、モデル間の 1 対 1 の戦いに基づいており、ネットワーク全体の評価者が独自の提案とスコアを作成します。最終的に、Llama3 がリストの 5 位にランクされ、GPT-4 と Claude3 Super Cup Opus の 3 つの異なるバージョンが続きました。英国のシングルリストでは、Llama3 がクロードを追い抜き、GPT-4 と並びました。この結果について、Meta の主任科学者 LeCun 氏は非常に喜び、リツイートし、

ブートストラップメディエーション効果テスト結果をstataで読み取る方法 Apr 05, 2024 am 01:48 AM

Stata でのブートストラップ媒介効果テストの解釈手順: 係数の符号を確認します: 媒介効果の正または負の方向を決定します。検定の p 値: 0.05 未満は、仲介効果が有意であることを示します。信頼区間を確認します。ゼロが含まれていない場合は、仲介効果が有意であることを示します。中央値の p 値を比較すると、0.05 未満であるため、仲介効果の重要性がさらに裏付けられます。

ブートストラップメディエーションテストの結果の見方 Apr 05, 2024 am 03:30 AM

ブートストラップメディエーションテストは、データを複数回リサンプリングすることによってメディエーション効果を評価します: 間接効果信頼区間: メディエーション効果の推定範囲を示します。間隔にゼロが含まれない場合、効果は有意です。 p 値: 信頼区間にゼロが含まれない確率を評価し、0.05 未満の値が有意であることを示します。サンプルサイズ: 分析に使用されるデータサンプルの数。ブートストラップサブサンプリング時間: 繰り返されるサンプリングの数 (500 ～ 2000 回)。信頼区間にゼロが含まれず、p 値が 0.05 未満の場合、媒介効果は有意であり、媒介変数が独立変数と従属変数の間の関係を説明していることを示します。

ブートストラップを使用してメディエーション効果をテストする方法 Apr 05, 2024 am 03:57 AM

ブートストラップテストは、リサンプリングテクノロジーを使用して統計テストの信頼性を評価し、媒介効果の有意性を証明するために使用されます。まず、直接効果、間接効果、および媒介効果の信頼区間を計算します。次に、統計的テストの有意性を計算します。 Baron and Kenny または Sobel 法に従った仲介タイプ、重要性、そして最後に自然な間接効果の信頼区間を推定します。

ブートストラップとスプリングブートの違いは何ですか Apr 05, 2024 am 04:00 AM

Bootstrap と Spring Boot の主な違いは次のとおりです。 Bootstrap は Web サイトスタイル用の軽量 CSS フレームワークであるのに対し、Spring Boot は Java Web アプリケーション開発用の強力なすぐに使用できるバックエンドフレームワークです。 Bootstrap は CSS と HTML に基づいていますが、Spring Boot は Java と Spring フレームワークに基づいています。 Bootstrap は Web サイトのルックアンドフィールの作成に重点を置いているのに対し、Spring Boot はバックエンド機能に重点を置いています。 Spring Boot を Bootstrap と統合して、完全に機能的で美しいものを作成できます。

ブートストラップテストメディエーションエフェクト stata コマンドの結果をエクスポートする方法 Apr 05, 2024 am 03:39 AM

Stata でのブートストラップメディエーション効果テストの結果をエクスポートします。結果を保存します。ブートストラップポスト変数リストを作成します。ローカル変数: coef se ci 結果をエクスポートします (CSV): 区切り文字付きの結果をエクスポートします。csv, varlist(`vars') カンマ nolabel を置き換えます

See all articles

Bootstrap でツールチップを使用するにはどうすればよいですか?プロンプトコンポーネントの使用法の簡単な分析

ポップオーバー

ツールチップ

これを一般クラスと組み合わせて、より多くの効果を作成できます。

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック