Tagged: tooltip
Hi i customized the color of the tooltip for the icons with this code:
.avia-tooltip { background-color: #949494; color: #ffffff; }
But now the liitle arrow / triangle under the tooltipbox is still back.
How tomeake this in the same color?
Regards,
Simon
Hey simonac!
Please add following code to Quick CSS as well
.avia-tooltip .avia-arrow { background-color: #949494; }
Cheers!
Yigit
There is opacity on the default tooltip background…is there any way to change the opacity with the new background color?
To keep it specific to the Icon ToolTips (Sonar Circles), I changed your code to:
.avia-tooltip.avia-icon-tooltip.avia-tt { background-color: #9bcb52; color: #000000; }
.avia-tooltip.avia-icon-tooltip.avia-tt .avia-arrow { background-color: #9bcb52; }
But I can’t figure out how to add the opacity to the background.
Thanks
Hi!
You need to add a alpha channel tot he background and use the rgb value instead of current HEX value for background.
To convert a hex color to rgb color google search “online convert hex to rgb”
in the end of the rgb add the alpha please check the below link
.class-name {
background: rgba(0,0,0,.5);
}
Best regards,
Vinay
Thanks, that worked….something I found that was surprising is that the RGBA is very picky on it’s format:
This works:
background: rgba(200, 54, 54, 0.5);
This does NOT work:
background: rgba (200, 54, 54, 0.5);
A space between “rgba” and “(” is INVALID…the only place I have found to be that picky on a space.
Thanks again!