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-i

Solution 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/