Firefox userChrome.css tooltip unwanted white border

Question

in my userChrome.css:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

tooltip {
  padding: 0px !important;
  padding-left: 0px !important;
  background-color: #000000 !important;
  border-width: 0px !important;
  border-left-width: 0px !important;
  border-right-width: 0px !important;
  border-top-width: 0px !important;
  border-bottom-width: 0px !important;
}
tooltip * {
  color: red !important;
  background-color: #000000 !important;
}

The tooltip has unwanted white border:

Tooltip Image

The CSS border-width: 0px; is an attempt to get rid of this. If I try doing any type of CSS margin: the tooltip will flick on then off in undesired fashion.

Mark Robbins · Answer 1 · 2014-04-12T18:25:05.903

Ok, here is the answer to my own question, the codes:

tooltip css

Will Produce:

Nice tooltip

Note: box-shadow does not seem to work on a tooltip, but opacity and border-radius does.

tooltip {
  padding: 6px !important;
  background-color: #000000 !important;
  border-width: 0px !important;
  border-left-width: 0px !important;
  border-right-width: 0px !important;
  border-top-width: 0px !important;
  border-bottom-width: 0px !important;
  border: 1px solid blue !important;
  border-radius:6px;
  opacity: 0.8;
}
tooltip * {
  color: #cccccc !important;
  background-color: #000000 !important;
  margin:0px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding:0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  border-width: 0px !important;
  border-left-width: 0px !important;
  border-right-width: 0px !important;
  border-top-width: 0px !important;
  border-bottom-width: 0px !important;
}

A barely-readable screen shot of css doesn't help others. Post the code. — Daedalus, Apr 12 '14 at 03:04

score 0 · Answer 2 · answered Mar 14 '16 at 12:24

Could be a missing -moz-appearance: none !important. Here's what works for me in Firefox 45.0 on FreeBSD:

/* Tooltips. */
tooltip {
    -moz-appearance: none !important;
    padding: 0px !important;
    border: solid #dd99bb !important;
    border-radius: 3px !important;
}

tooltip * {
    background-color: #620044 !important;
    color: white !important;
    padding: 2px 5px 3px 5px !important;
    font-size: 7pt !important;
}

Firefox userChrome.css tooltip unwanted white border

2 Answers2