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始终存在并准备应用于元素，因此在悬停时添加元素时始终应用它。

解决方案是将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"
        });
    });
});

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

Bootstrap工具提示CSS更改工作在文件中但不是jQuery

1 个答案: