ホームページ > 記事 > ウェブフロントエンド > Bootstrap でツールチップを使用するにはどうすればよいですか?プロンプトコンポーネントの使用法の簡単な分析
Bootstrap でツールチップを使用するにはどうすればよいですか?プロンプトコンポーネントの使用法の簡単な分析
- 青灯夜游転載
- 2021-12-07 19:12:483353ブラウズ
Bootstrap でプロンプト ツールを使用する方法は?次の記事では、Bootstrap5 でのポップアップ プロンプトとツールチップ コンポーネントの使用方法を紹介します。
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('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>
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 src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
</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('#example-popover'), {
container: 'body'
})
</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('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>
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('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
trigger: 'focus'
})
</script>
</body>
</html>
ツールチップ
ツールチップはポップオーバーに非常によく似ており、ロードすることを選択した場合は初期化する必要があります。あなた自身。その表示も 予約されたスペースに応じて自動的に調整されます。ポップアップ ヒントとは異なり、ツール ヒントはボタンの上にマウスを置くと表示され、マウスを離すとクリックすることなく自動的に非表示になります。
1 ツール ヒント検証コード
は基本的にポップアップ プロンプトに似ています。このコードは、ツールチップが有効になります。
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
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 src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>
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 src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>
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 src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>
これを一般クラスと組み合わせて、より多くの効果を作成できます。
両方のプロンプトのテキスト部分では、HTML とブートストラップの一般クラスを使用して、間隔、レイアウト、フォント、色などを設定できます。自分で試すことができます。よりクールな効果を生み出すために。
ブートストラップの詳細については、ブートストラップの基本チュートリアルをご覧ください。 ！
以上がBootstrap でツールチップを使用するにはどうすればよいですか?プロンプトコンポーネントの使用法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。