Monica

Hmm.

So the selectors (the stuff before the {}s) are a mix of IDs (#whatever) and classes (.whatever), plus an entity (tooltip). The IDs and classes try to match what various sites call their tooltips, plus the html entity tooltip, which probably isn't all you want. Another easy way to get tooltips in HTML is to use the "title" attribute:

<a href="the link" title="this is the tooltip">the display text</a>

This question talks about it:
https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag

Sadly, you can't use CSS to fix such tooltips; they're rendered by the browser, which makes them system dependent. But the top answer talks about copying the contents of the tooltip into a CSS-created tooltip (CSS now lets you add content directly--very odd). You see both tooltips, but for me if I hover, then move onto the "new" tooltip, the second tooltip doesn't obscure the first.

The following snippet should make there be a tooltip for any element ("*") that has a title attribute ("[title]") when you hover over it (":hover"), by putting a new element after it (":after"). The contents of this new tooltip are sourced from the title attribute of the existing tooltip (..."content: attr(title)"). The rest is positioning and style to make it look okay; feel free to tinker with color, background, padding, etc. to make it how you like it.

*[title]:hover:after {
  content: attr(title);
  position: absolute;

  padding: 0.5em;
  left: 0;
  top: 100%;
  background: white;
  color: black;
  border: 1px solid black;
  white-space: nowrap;
}

edit: Since this is a new element, you don't need the !important part; you're not overruling the webpage's particulars (and !important doesn't always win, either...)