Heim > Artikel > Web-Frontend > Wie verwende ich Tooltips in Bootstrap? Eine kurze Analyse der Verwendung von Prompt-Komponenten
Wie verwende ich Tooltips in Bootstrap? Eine kurze Analyse der Verwendung von Prompt-Komponenten
- 青灯夜游nach vorne
- 2021-12-07 19:12:483364Durchsuche
Wie verwende ich den Tooltip in
Bootstrap? Der folgende Artikel stellt Ihnen die Verwendung von Popup-Eingabeaufforderungen und Tooltip-Komponenten in Bootstrap5 vor. Ich hoffe, er wird Ihnen hilfreich sein!
Lassen Sie uns über zwei Steuerelemente sprechen: Popovers und Tooltips. Diese beiden Komponenten haben eine einzige Funktion und sind sehr einfach zu verwenden. Sie haben viele Ähnlichkeiten. [Verwandte Empfehlungen: „Bootstrap-Tutorial“]
Popovers (Popovers)
1 Beispiel
1.1 Hinweise
Bei der Verwendung des Popover-Plug-Ins zu beachtende Dinge:
- Es muss sich verlassen auf bootstrap.bundle.min.js wird funktionieren!
- Aus Leistungsgründen sind Popovers optional, Sie müssen sie also selbst initialisieren.
1.2 Popovers überall aktivieren
Eine Möglichkeit, alle Popovers auf der Seite zu initialisieren, besteht darin, sie über ihr data-bs-toggle-Attribut auszuwählen:
<!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 Verwenden Sie die Containeroption
Wenn sicher Wenn Stile auf dem übergeordneten Element das Popover beeinträchtigen, müssen Sie einen benutzerdefinierten Container angeben, damit der HTML-Code des Popovers in diesem Element angezeigt wird. Es gibt keinen Unterschied in der Anzeige zwischen dieser und der obigen, außer dass der Schaltflächenklasse ein Beispiel-Popover hinzugefügt wird.
<!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>Sie können auch id verwenden, was verständlicher zu sein scheint
<!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 Ändern Sie die Popup-Richtung
Wir können die Popup-Eingabeaufforderungsinformationen in vier Richtungen gestalten: oben, rechts, unten, links. Es ist auch sehr einfach zu verwenden. Sie müssen lediglich data-bs-placement="position" zum Schaltflächenattribut hinzufügen, wobei die Position oben, unten, links oder rechts sein kann.
Es ist zu beachten, dass der anzuzeigende Ort über genügend Platz verfügen muss, da sonst automatisch ein geeigneter Ort gefunden wird. Wenn Sie festlegen, dass er oben angezeigt wird, sich die Oberseite jedoch bereits oben im Browser befindet, es wird unten angezeigt.
<!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 Überall wieder schließen
Klicken Sie standardmäßig auf die Schaltfläche, um die Aufforderungsmeldung anzuzeigen. Klicken Sie erneut auf die Schaltfläche, um die Meldung auszublenden. Andernfalls wird die Meldung immer angezeigt.
Wenn wir erneut irgendwo klicken möchten, um die zuvor angezeigte Eingabeaufforderung zu schließen, müssen wir der Schaltfläche ein data-bs-trigger="focus"属性，并在js文件中增加trigger: 'focus' hinzufügen.
Um ein korrektes browser- und plattformübergreifendes Verhalten zu erreichen, muss das a-Tag anstelle des Button-Tags verwendet werden und auch das tabindex-Attribut muss enthalten sein.
<!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>
Tooltips
Tooltips sind Popovers sehr ähnlich. Sie werden ebenfalls optional geladen und müssen von Ihnen selbst initialisiert werden. Seine Anzeige wird auch sein Automatische Anpassung an den reservierten Platz. Im Gegensatz zu Popup-Tipps werden Tooltips angezeigt, wenn die Maus über die Schaltfläche bewegt wird, und werden automatisch ausgeblendet, wenn die Maus wegbewegt wird, ohne dass ein Klick erforderlich ist.
1 Der wirksame Tooltip-Code
ähnelt im Wesentlichen der Popup-Eingabeaufforderung. Dieser Code muss in die Seite eingefügt werden, damit der Tooltip wirksam wird.
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})2 Tooltip-Beispiel
Tooltips werden im Allgemeinen auf Schaltflächen und Links verwendet, um deren Funktionen zu erklären, und können natürlich auch auf Bildern verwendet werden. Der Wert des Titels ist der Inhalt, der angezeigt wird, wenn die Maus darüber fährt, und Sie können das HTML-Element verwenden.
Der Link verfügt über ein Standardtitelattribut und sein Eingabeaufforderungstext wird in der Statusleiste des Browsers angezeigt. Diese Anzeige ist intuitiver.
<!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 Tooltip-Anzeigeposition
unterstützt vier Tooltip-Richtungen wie die Popup-Eingabeaufforderung: oben, unten, links und rechts.
<!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 wird für Eingabeaufforderungen in Artikeln verwendet
<!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>
kann mit gemeinsamen Klassen kombiniert werden, um mehr Effekte zu erzielen
Die Textteile beider Eingabeaufforderungen können die gemeinsamen Klassen von HTML und Bootstrap verwenden , Abstände, Typografie, Schriftarten, Farben usw. festlegen, Sie können es selbst ausprobieren, um weitere coole Effekte zu erzielen.
Weitere Informationen zu Bootstrap finden Sie unter: Bootstrap Basic Tutorial! !
Das obige ist der detaillierte Inhalt vonWie verwende ich Tooltips in Bootstrap? Eine kurze Analyse der Verwendung von Prompt-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Eine kurze Diskussion zum Sortieren und Versetzen von Spalten im Bootstrap-Rasterlayout
- Lassen Sie uns über die Bildkomponente und die Gliederungskomponente in Bootstrap sprechen
- Wie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse
- Wie füge ich eine Breadcrumb-Navigation in Bootstrap hinzu? Kurze Analyse der Methoden
- Ausführliche Erklärung zur Verwendung der Warnbox-Komponente in Bootstrap
- Eine ausführliche Erklärung zur Verwendung der Card-Komponente in Bootstrap