Wie kann ich die Farben der Bootstrap-Tooltips anpassen?

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>

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

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

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;
}

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;
}

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!