Tooltip in Bootstrap 3 has unwanted CSS effects in Firefox

Question

Please see my live site http://mozzor.com and hover over the circle icons at the top. Notice two effects that occur only in Firefox (I'm using FF23):

1) There is a blue underline added to the text of the tooltip

2) The text renders upon hovering, then after a moment, seems to blur itself.

I'm having trouble debugging this with Firebug...I can't find a css element that corresponds to either of these effects.

Just in case, here is some relevant code for how I style the tooltips:

// 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
    });
});

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:

Github issue: https://github.com/twbs/bootstrap/issues/10218

Bugzilla issue: https://bugzilla.mozilla.org/show_bug.cgi?id=909814

Answer 1

Your first problem is the underline, which is dictated by the CSS text-decoration property. I'm not exactly sure why it's happening on Firefox (Chrome seems to have it correct, because text-decoration for your menu items is set to none). Here's a quick fix, but I'll see if I can find the cause.

#iconrow a {
    text-decoration: none;
}

About the second question: I don't understand why you can't do this with CSS.