How do you apply custom userChrome.css styles to the default tooltip created from the XUL tooltiptext attribute?
Hi,
I'm trying to customize the fonts in firefox to better match the system fonts, with an eye towards fixing HiDPI font sizes.
Here is my userChrome.css:
<<START
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/** for some reason this doesn't apply to dynamically generated `tooltiptext` tooltips */
xul|* {
font-size: 0.5rem;
}
END>>
It works great, except for any tooltip created w/ the XUL tooltiptext element. I've tried, "!important", explicit includes for "xul|tooltip[default=true]", and many other fixes, none seem to work. If I inspect the XUL, firefox seems to be applying the tooltip CSS styles from chrome://global/skin/popup.css over any style rule I write.
Attatched screenshot of the oversized tootltip text from the default tooltip, notice the size of the font vs the rest of the UI.
Any way to fix this?
Ilungisiwe ngu Erick
All Replies (3)
Another contributor may be better to ask however I did find in the XUL research that there is a sizeTo that specifies the height and width of a tooltip in the Firefox interface:
However there is also the add on called Stylish that gives access to a bunch of user styles for Firefox at userstyles.org, one of which offers the customization of tool tip font sizes: https://userstyles.org/styles/8558/custom-tooltips-background-color-fon...
You can try to add -moz-appearance: none!important; if style rules aren't working. You will probably have to add extra rules to style the tooltip.
cor-el said
-moz-appearance: none!important;
I tried that, it only applies to non-default tooltips. It doesn't style the default tooltip.