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!