javascript - Bootstrap 工具提示 CSS 更改在文件中有效，但不适用于 jQuery

Question

我正在尝试自定义 .tooltip-inner 的外观类(来自 Twitter Bootstrap)，当我将其添加到我的 CSS 文件(覆盖 Bootstrap.css)时，它工作正常:

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

这里是使用工具提示的地方:

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

但是当我尝试这个时:

$(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"});
});

未出现更改。

旁注:出现的工具提示的实际类是 class="tooltip fade bottom in" (这是在运行时使用 Firebug 观察到的)但修改 .tooltip-inner CSS 似乎可以工作。

Answer 1

当悬停发生时，Twitter Bootstrap 库会添加和删除工具提示元素。即使在使用 .tooltip() 初始化工具提示后，没有 HTML 添加到页面...所以您立即调用 .css()关于$(".tooltip-inner")不匹配任何元素。当您将鼠标悬停在目标上时，Bootstrap 会添加 <div class="tooltip">紧跟在目标之后的元素。当您离开目标时，该新元素将被删除。

CSS 始终存在并准备好应用于元素，因此当元素在悬停时添加时它始终会应用。

解决方案是绑定(bind) mouseenter事件到目标并应用样式，然后:

$(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"
        });
    });
});

演示: http://jsfiddle.net/uDF4N/