Heim > Web-Frontend > CSS-Tutorial > Wie kann ich die Farbe von Bootstrap-Tooltips ändern?

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

Linda Hamilton
Freigeben: 2024-12-18 04:31:14
Original
754 Leute haben es durchsucht

How Can I Change the Color of Bootstrap Tooltips?

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>
Nach dem Login kopieren

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

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

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;
}
Nach dem Login kopieren

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 */
}
Nach dem Login kopieren

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!

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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage