I'm trying to re-skin/re-format a tooltip in Bootstrap 4, and the original way of doing it doesn't seem to work anymore. Currently I am doing this:
.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
is working fine, but .tooltip.top .tooltip-arrow
isn't; it stays black. I am assuming .tooltip.top
is the arrow on top of a bottom aligned tooltip.
Any help would be greatly appreciated
Simple use of this code in your CSS file.
Bootstrap v4.0.0-beta
data-toggle="tooltip" data-placement="right"
-This works for me.
As of
Bootstrap 4.0
CSS for tooltip recoloring is handled by the
.tooltip-inner
class as you noticed:Css for top arrow:
Css for right arrow:
Css for bottom arrow:
Css for left arrow:
A super-easy way to change them is to override the default variables:
$tooltip-opacity: $some_number; $tooltip-arrow-color: $some_color; $tooltip-bg: $some_color;
If you are using
SASS
, checktooltip.scss
file:GIT
To change color, just override this variables values:
$tooltip-arrow-color
and$tooltip-bg
.Using a custom style for each tooltip
The BS4 solutions above work but they all change the tooltip style globally. All tooltips will look the same. It would be much sweeter to use a custom style for each tooltip, e.g. like for the alert boxes. I have no idea why the BS team did not provide that feature for tooltips off the shelf.
Hello, data-container
There is a rather simple solution making use of the container option that the BS tooltip provides. With this option you can append the tooltip element to another specific element. So you can wrap the tooltip into another element and append it to it via the data-container attribute like this:
Now you can use the wrapper element to style the tooltip inside it inividually. For example, you want a tooltip in "danger" style. This would be the HTML:
And this would be the stylesheet:
That will look like this:
Another tooltip on the same page could look like this:
You get the idea...
The Stylesheet
And since I have been through it already, here are my tooltip styles based on the BS4 alert styles:
Hope that helps. Best regards,
George