Heim > Web-Frontend > CSS-Tutorial > Wie kann ich die Farben der Bootstrap-Tooltips anpassen?

Wie kann ich die Farben der Bootstrap-Tooltips anpassen?

DDD
Freigeben: 2024-12-07 11:34:13
Original
227 Leute haben es durchsucht

How Can I Customize Bootstrap Tooltip Colors?

Anpassen der Bootstrap-Tooltip-Farben

Standardmäßig haben Tooltips in Bootstrap eine einzige Farbe. Es kann jedoch vorkommen, dass Sie mehrere Farbvarianten wünschen. Hier ist eine umfassende Anleitung zum Erreichen dieser Anpassung:

Verwenden von CSS

Um die Tooltip-Farbe zu ändern, fügen Sie dem Element, das den Tooltip auslöst, eine benutzerdefinierte Klasse hinzu:

<a href="#" data-toggle="tooltip" data-placement="bottom"
title="" data-original-title="Tooltip on bottom"
class="red-tooltip"></a>
Nach dem Login kopieren

Definieren Sie im CSS Stile für die benutzerdefinierte Klasse:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {
  background-color: #f00;
}
Nach dem Login kopieren

Dadurch wird die Tooltip-Farbe geändert auf Rot für das Element mit der Red-Tooltip-Klasse.

Targeting auf bestimmte Tooltip-Platzierungen

Wenn Sie Farbanpassungen basierend auf der Tooltip-Platzierung benötigen, beachten Sie Folgendes:

Für Bootstrap-Versionen vor 4

.red-tooltip + .tooltip.top > .tooltip-arrow {
  background-color: #f00;
}
Nach dem Login kopieren

Dies zielt auf oben platzierte Tooltips ab und wendet die rote Farbe auf den Tooltip-Pfeil an.

Für Bootstrap 4 und höher

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00;
}
Nach dem Login kopieren

Dieser Code gibt die Farbe für platzierte Tooltips an der Boden. Sie können die Platzierung im x-Placement-Attribut ändern, um auf andere Platzierungen abzuzielen.

Zusätzliche Ressourcen und Demo

Um die oben genannten Methoden auszuprobieren, besuchen Sie dieses jsFiddle:
[fiddle link]

Indem Sie diese Schritte befolgen, können Sie benutzerdefinierte Tooltip-Farben erstellen passend zu Ihren Designanforderungen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Farben der Bootstrap-Tooltips anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage