Custom tooltip colours

[ygoe]

My page uses a darkgrey background and these tooltips are barely visible. The page frame itself is black and white only, no colour is used outside the actual content. I'd like to use a lighter grey colour for the tooltips and black text on them. But the hint.css file is too complex to edit. What override CSS code do I need to add custom colours, or could this be added/prepared by the library?

[chinchang]

@dg9ngf Currently there isn't any way to generate custom library (though am working on it). To add a new color class, say hint--mycolor, add the following code to hint.css:

/**
 * My new color class
 */
.hint--mycolor:after {
  background-color: #b34e4d;
  text-shadow: 0 -1px 0px #5a2626; }
.hint--mycolor.hint--top:before {
  border-top-color: #b34e4d; }
.hint--mycolor.hint--bottom:before {
  border-bottom-color: #b34e4d; }
.hint--mycolor.hint--left:before {
  border-left-color: #b34e4d; }
.hint--mycolor.hint--right:before {
  border-right-color: #b34e4d; }

Replace all instance of #b34e4d with your new color and #5a2626 with a slightly darker version of the same color.

[ygoe]

Thank you, that works fine. I added the color attribute for the first one, too.

BTW, I also set text-shadow: none; which resolved the rendering issue in Firefox, see my other bug. And because I generally don't use text shadow effects in the site's design.

[chinchang]

Cool.