Popovers in Bootstrap 5

Popover ähneln Tooltips, enthalten jedoch weitere Informationen zu einem bestimmten Element und zeigen nur seinen Inhalt an, wenn ein Benutzer darauf klickt. Popovers können nur abgewiesen werden, indem Sie erneut auf das Element klicken. Der Zweck von Popover ist es, dem Benutzer kennenzulernen, wie man sie verwendet, oder wie man sie benutzt. Es wird auch verwendet, um beschreibendes Wissen über ein Produkt zu vermitteln, wenn der Benutzer es verlangt.

Dieser Artikel erzählt Ihnen davon

• Popover -Erstellungsprozess
• Popover -Positionen
• Popover schließen
• Popover auf schwebe

So erstellen Sie Popovers

Fügen Sie hinzu, um ein Popover zu erstellen Data-BS-Toggle = "Popover" Und title = "Popover Header Text geht hier" für Popovers Header Section und Data-BS-Content = "Popover Body Text geht hierher" Für den Körperabschnitt von Popover.

Code

Klicken

Dieser Prozess erstellt und ermöglicht ein grundlegendes Popover.

Popover -Positionen

Popovers sind also ebenso wie Tooltips positioniert, um einen Popover -Gebrauch zu positionieren Data-BS-Placement = ”oben/unten/rechts/links” Attribut mit Data-BS-Toggle, Titel Und Daten-BS-Inhalt Attribute.

Code

Popover -Positionen

Spitze
Buttom



Links
Rechts

So werden Popover -Positionen angegeben.

Popovers schließen

Popovers sind nur geschlossen, wenn Sie erneut auf das Element oder die Schaltfläche klicken, auf das Sie vorher klicken, um es sichtbar zu machen. Wenn Sie jedoch den Popover schließen möchten, indem Sie überall auf dem Bildschirm klicken, fügen Sie einfach hinzu Data-BS-Trigger = "Fokus" Attribut Ihrer Schaltfläche oder Ihrem Element.

Code

Popover schließen

Klick mich

Dieser Vorgang schließt ein Popover, wenn Sie überall auf dem Bildschirm klicken.

Popover auf Schwebe

Wie wir wissen, sind Popovers nur beim Klicken auf eine Schaltfläche oder ein Element sichtbar, aber wenn Sie möchten, dass dieses Popover sichtbar ist, indem Sie den Cursor über das Element oder die Schaltfläche wie das Tooltip überschweben, fügen Sie dann die hinzu Data-BS-Trigger = ”Hover” Attribut Ihrer Schaltfläche oder Ihrem Element.

Code

Popover auf Schwebe

Schweben

Auf diese Weise erscheint Popover beim Schwebefahren.

Abschluss

Popover wird erstellt, indem das Hinzufügen des Hinzufügens Data-BS-Toggle = "Popover" Attribut. Sein Header wird durch Hinzufügen erstellt Titel = "Header Text" Attribut und sein Körper werden durch Hinzufügen des Data-BS-Content = "Body Text" Attribut auf Ihr Element oder Ihre Schaltfläche. Damit Popover einen JavaScript -Code schreiben kann, wie im Artikel geschrieben. Da Popover nur geschlossen wird, indem Sie erneut auf das Element oder die Schaltfläche klicken, klicken Sie daher zum Schließen, indem Sie überall auf dem Bildschirm hinzufügen klicken Data-BS-Trigger = "Fokus" Attribut, und wenn Sie Popover öffnen möchten, indem Sie den Cursor nur hinzufügen, addieren Sie Attribut Data-BS-Trigger = "Hover".