Re-Farbe Tooltips in Bootstrap 4
Ich versuche ein re-Haut/re-format ein tooltip in der Bootstrap-4, und die originelle Art und Weise zu tun, es scheint nicht mehr zu funktionieren. Momentan mache ich das:
.tooltip-inner {
background: #7abcff;
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
background: -moz-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );
color: #fff;
font-family: 'Roboto', Arial, sans-serif;
}
.tooltip.top .tooltip-arrow {
border-top-color: #7abcff;
}
.tooltip-inner
ist in Ordnung, aber .tooltip.top .tooltip-arrow
nicht; es bleibt schwarz. Ich gehe davon aus, dass .tooltip.top
ist der Pfeil auf der Unterseite ausgerichtet tooltip.
Jegliche Hilfe würde sehr geschätzt werden
Du musst angemeldet sein, um einen Kommentar abzugeben.
Als der
Bootstrap 4.0
CSS für tooltip umfärben erfolgt durch die
.tooltip-inner
Klasse, als Sie bemerkte:Css für die top-Pfeil:
Css für rechts-Pfeil:
Css für unten-Pfeil:
Css für Links-Pfeil:
Wenn Sie
SASS
überprüfentooltip.scss
Datei:GIT
Um Farbe zu ändern, einfach überschreiben dieser Variablen Werte:
$tooltip-arrow-color
und$tooltip-bg
.Einfache Nutzung Sie diesen code in Ihre CSS-Datei.
Ich bin mit bootstrap 4.0.0-beta.2. und dieser code funktionierte für mich.
Bootstrap 4
hat verschiedene Klassen als3
verwenden, benötigen Sie:Diese Selektoren darstellen Pfeil von der Spitze ausgerichtet tooltip.
Bootstrap 4.0.0 & Popper.js
Dies ist ein minimal-code für Links-seitig grün tooltip:
Fügen Sie ihn einfach in Ihrem CSS.
.arrow:before
ist genug.Mit einem benutzerdefinierten Stil für jeden tooltip
Den BS4 oben genannten Lösungen arbeiten, aber Sie alle ändern Sie den QuickInfo-Stil weltweit. Alle tooltips gleich Aussehen. Es wäre sehr viel süßer ist, um eine benutzerdefinierte Stil für jeden tooltip, wie z.B. für die alert-Boxen. Ich habe keine Ahnung, warum das BS-team hat keine Funktion für die tooltips aus dem Regal.
Hallo, Daten-container
Gibt es eine Recht einfache Lösung ist die Nutzung der container-option, die BS tooltip bietet. Mit dieser option können Sie fügen Sie den tooltip-element zu einem anderen bestimmten element. So können Sie wickeln Sie das tooltip in ein anderes element und hängen Sie es über die Daten-container-Attribut wie dieses:
Nun können Sie mit dem wrapper-element Stil der tooltip im es inividually. Zum Beispiel, Sie wollen ein tooltip in der "Gefahr" - Stil. Dies wäre der HTML:
Wäre und das stylesheet:
Wird wie folgt Aussehen:
Anderen tooltip auf der gleichen Seite könnte wie folgt Aussehen:
Du auf die Idee...
Das Stylesheet
Und da habe ich durch ihn schon, hier sind meine tooltip-styles auf der Basis der BS4 alert styles:
Hoffe, das hilft. Beste Grüße,
George
Bootstrap v4.0.0-beta
data-toggle="tooltip"
data-placement="right"
-Das funktioniert für mich.
Eine super-einfache Möglichkeit, Sie zu ändern ist, überschreiben die Standard-Variablen:
$tooltip-opacity: $some_number;
$tooltip-arrow-color: $some_color;
$tooltip-bg: $some_color;