Tagged: tooltip
-
AuthorPosts
-
March 16, 2015 at 10:45 am #412011
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,
SimonMarch 16, 2015 at 3:37 pm #412219Hey simonac!
Please add following code to Quick CSS as well
.avia-tooltip .avia-arrow { background-color: #949494; }Cheers!
YigitJanuary 31, 2016 at 6:50 am #575168There 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
-
This reply was modified 9 years, 9 months ago by
Owen.
February 1, 2016 at 10:30 pm #576054Hi!
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,
VinayFebruary 5, 2016 at 12:29 am #578128Thanks, 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!
February 5, 2016 at 8:21 am #578350 -
This reply was modified 9 years, 9 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.
