Wie kann ich die Farbe von Bootstrap-Tooltips ändern?

So ändern Sie die Tooltip-Farbe von Bootstrap

Durch Ändern der Tooltip-Farbe in Bootstrap können Sie das Erscheinungsbild an das Design Ihrer Website anpassen. Dies kann durch das Hinzufügen benutzerdefinierter CSS-Stile erreicht werden.

Um die Tooltip-Farbe zu ändern, weisen Sie zunächst dem Element, in dem Sie den Tooltip verwenden, eine eindeutige Klasse zu. Zum Beispiel:

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

Fügen Sie als Nächstes die folgenden CSS-Regeln hinzu:

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

Dadurch werden der Pfeil und der innere Hintergrund des Tooltips in Rot geändert. Sie können #f00 durch einen beliebigen Farbcode ersetzen, um die Farbe des Tooltips anzupassen.

In Bootstrap 4 müssen Sie möglicherweise gezielt auf den unteren Platzierungspfeil zielen, um die standardmäßige schwarze Farbe zu entfernen:

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

Verwenden Sie für Bootstrap 4 außerdem das folgende CSS für Tooltips:

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00; /* Red */
}

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