How to attach tooltips to PrefBar buttons - M-Reimer/prefbar GitHub Wiki

Suppose you added Cookies checkbox to PrefBar and, to save space, labeled it just C. If you don't use it often, you would forgot what C stands for, is it Cookies or is it Colours? A tooltip would be of great use here.

Maybe PrefBar will support tooltips in future releases, but so far, as a workaround, we can emulate them using technique described here and here, changing PrefBar appearance via userChrome.css.

While in general CSS sucks (well known fact), in most cases we can use some trickery and adhockery to achieve our purposes. This time, we use :after pseudo-element as a container for our tooltip and :hover pseudo-class to make it show up on mouse over.

First, we create this rule for PrefBar's buttons and checkboxes, describing the tooltips:

#prefbar-buttons checkbox:hover:before,
#prefbar-buttons toolbarbutton:hover:before {
    position:fixed; z-index:999;
    padding: 0 4px 0 4px;
    margin: 1ex 0 0 0;
    font-weight: normal;
    background-color:khaki; color:black;
    border:1px solid gray;
}

Next, for each element that we want to have a tooltip, we define the tooltip's content, like this:

#prefbar-buttons checkbox[id$="fonts"]:hover:before {
    content: "Fonts On/Off";
}
#prefbar-buttons toolbarbutton[id$="clearcookies"]:hover:before {
    content: "Clear All Cookies";
}
#prefbar-buttons toolbarbutton[id$="clearallcache"]:hover:before {
    content: "Clear All Cache";
}
#prefbar-buttons checkbox[id$="images"]:hover:before {
    content: "Images On/Off";
}
#prefbar-buttons toolbarbutton[id$="savepage"]:hover:before {
    content: "Save Page";
}

To learn an element Id, right-click the element on PrefBar, choose Edit button... from pop-up, and you'll see the Id.

If we want to use different tooltips for checked and non-checked state of a checkbox, we have to create two rules for each element, this way (order is important):

#prefbar-buttons checkbox[id$="javascript"]:hover:before {
    content: "Javascript is Off";
}
#prefbar-buttons checkbox[id$="javascript"][checked="true"]:hover:before {
    content: "Javascript is On";
}

Well, that's all. You can use different size or colors, but I'm afraid more advanced design would be too cumbersome to be worth it.

I only tested it with Classic Theme Restorer theme, so your way may vary.

Next time: How to use icons instead of text labels on PrefBar buttons.

This howto has been written by Yan Li. Thanks for sharing!