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

Bootstrap tooltip CSS changes work in file but not with jQuery

本文关键字：有效 不适用 jQuery 适用于 文件 工具提示 CSS      更新时间：2023-09-26

我正在尝试自定义.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似乎有效。

当悬停发生时，Twitter引导库会添加和删除工具提示元素。即使在用.tooltip()初始化工具提示后，页面中也不会添加HTML。。。因此您在$(".tooltip-inner")上立即调用.css()不匹配任何元素。当您将鼠标悬停在目标上时，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"
        });
    });
});

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

相关文章：