Bootstrap 3 Tooltips Farbe ändern
Wie läßt sich die Farbe der Tooltips im Bootstrap Framework ändern? Die richtigen Style Anweisungen zu finden ist etwas schwierig, da sie vom Javascript nur in den HTML-Quelltext geschrieben werden, solange sich die Maus über der entsprechenden Stelle befindet.
Um die Farben des Tooltips zu ändern, müssen zwei Klassen in der eigenen CSS-Datei überschrieben werden. Am Beispiel “Tooltip oben” sollen die Farben so geändert werden, daß der Hintergrund weiß mit einem farbigen Rahmen (Farbe #cccccc) und die Schriftfarbe schwarz ist. Damit auch der Pfeil entsprechend angepasst wird überschreibe ich folgende beiden Klassen:
/* Tooltip Anpassungen */
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-top-color: #fff;
border-width: 5px 5px 0;
}
.tooltip-inner {
color: #000;
background: #fff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
/* Bootstrap 3 Ende Tooltip */
Die Farbe des Pfeils wird innerhalb der .tooltip-arrow Anweisung durch den Eintrag “border-top-color” festgelegt.
Für Tooltips, die auf der linken Seite angezeigt werden sollen sieht der Code nun so aus:
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-left-color: #fff;
border-width: 5px 0 5px 5px;
}
Für Tooltips auf der rechten Seite wird “border-right-color” geändert:
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-right-color: #fff;
border-width: 5px 5px 5px 0;
}
Und zuletzt noch für Tooltips die nach unten zeigen sollen:
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-bottom-color: #fff;
border-width: 0 5px 5px;
}
Ich hoffe, daß hilft und gibt genug Anregung wo mit den Anpassungen für die Tooltips begonnen werden muß.
Sind Sie bereit für Ihren SEO Erfolg?
Starten Sie mit uns gemeinsam durch.
