Bootstrap tooltip CSS changes work in file but not with jQuery

问题

I'm trying to customize the look of the .tooltip-inner class (from Twitter Bootstrap) and it's working fine when I add it to my CSS file (which overrides Bootstrap.css):

.tooltip-inner {
    color: #333;
    background-color: #fff;
    border: 1px solid #333;
}

Here is where tooltip is used:

<img id="notebookIcon" src="notebook.png" data-placement="bottom" data-toggle="tooltip" title="Apps" />

But when I try this:

$(function(){
    //$('#notebookIcon').tooltip(); Uncommenting this doesn't fix
    $('.tooltip-inner').css('background-color','#fff');
    $('.tooltip-inner').css('color','#333');
    $('.tooltip-inner').css({"border-color": '#333',"border-width":"1px","border-style":"solid"});
});

Changes do not appear.

Side Note: The actual class of the tooltip that appears is class="tooltip fade bottom in" (this is observed using Firebug at runtime) but modifying .tooltip-inner CSS seems to work.

回答1:

The Twitter Bootstrap library adds and removes the tooltip elements when the hover occurs. Even after initializing the tooltips with .tooltip(), no HTML is added to the page...so your immediate calling of .css() on the $(".tooltip-inner") matches no elements. When you hover over the target, Bootstrap adds a <div class="tooltip"> element immediately after the target. When you leave the target, that new element is removed.

CSS is always there and ready to be applied to elements, so it's always applied when the element is added on hover.

The solution would be to bind the mouseenter event to the target and apply the styles then:

$(function () {
    $('#notebookIcon').tooltip().on("mouseenter", function () {
        var $this = $(this),
            tooltip = $this.next(".tooltip");
        tooltip.find(".tooltip-inner").css({
            backgroundColor: "#fff",
            color: "#333",
            borderColor: "#333",
            borderWidth: "1px",
            borderStyle: "solid"
        });
    });
});

DEMO: http://jsfiddle.net/uDF4N/

来源：https://stackoverflow.com/questions/17737650/bootstrap-tooltip-css-changes-work-in-file-but-not-with-jquery