Wie verwende ich Tooltips in Bootstrap? Eine kurze Analyse der Verwendung von Prompt-Komponenten

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:

         
  
 



  点此按钮弹出提示  
    

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.

         
  
 



  点此按钮弹出提示  
    

Sie können auch id verwenden, was verständlicher zu sein scheint

         
  
 



  点此按钮弹出提示  
    

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.

         
  
 



  默认   上部   下部   左侧   右侧  
    

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 eindata-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.

         
  
 



  点此按钮弹出提示，点击空白处提示消失  
    

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.

         
  
 



  按钮提示  链接提示 
    

3 Tooltip-Anzeigeposition

unterstützt vier Tooltip-Richtungen wie die Popup-Eingabeaufforderung: oben, unten, links und rechts.

         
  
 



  顶部提示   右侧提示   底部提示   左侧提示  
    

4 wird für Eingabeaufforderungen in Artikeln verwendet

         
  
 



 
 
 最近B站 是迎来了自己12周年的纪念日， 之前吧，B站做过好些流行语盘点， 比如“awsl”一类的词，不少朋友都刷过，甚至有的梗还出圈了， 像是后那个什么浪一类的，我留意到B站官方很多时候还会做一些相关的科普盘点啥的，时不时有推送。 
 
 
    

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!