Note that there are some explanatory texts on larger screens.

plurals
  1. POTooltip in Bootstrap 3 has unwanted CSS effects in Firefox
    text
    copied!<p>Please see my live site <a href="http://mozzor.com" rel="nofollow">http://mozzor.com</a> and hover over the circle icons at the top. Notice two effects that occur only in Firefox (I'm using FF23):</p> <p>1) There is a blue underline added to the text of the tooltip</p> <p>2) The text renders upon hovering, then after a moment, seems to blur itself.</p> <p>I'm having trouble debugging this with Firebug...I can't find a css element that corresponds to either of these effects.</p> <p>Just in case, here is some relevant code for how I style the tooltips:</p> <pre><code>// Variable currentSelect corresponds to hex color value // selected in the jQuery widget seen at the top left side of the page $('#notebookIcon,#pencilIcon,#headphoneIcon').tooltip().on("mouseover", function () { var tooltip = $(this).next(".tooltip"); //Box tooltip.find(".tooltip-inner").css({ backgroundColor: "#fff", color: currentSelect, borderColor: currentSelect, borderWidth: "1px", borderStyle: "solid" }); //Arrow tooltip.find(".tooltip-arrow").css({ //borderTopColor: currentSelect, //borderLeftColor: currentSelect, //borderRightColor: currentSelect, borderBottomColor: currentSelect }); }); </code></pre> <p>EDIT: Second issue seems to deal with font aliasing slowly in Firefox. Issue still persists after trying several different fonts. For more information, see below:</p> <p>Github issue: <a href="https://github.com/twbs/bootstrap/issues/10218" rel="nofollow">https://github.com/twbs/bootstrap/issues/10218</a></p> <p>Bugzilla issue: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=909814" rel="nofollow">https://bugzilla.mozilla.org/show_bug.cgi?id=909814</a></p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload