Bootstrap工具提示CSS更改可在文件中运行，但不适用于jQuery [英] Bootstrap tooltip CSS changes work in file but not with jQuery

问题描述

我正在尝试自定义.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 Bootstrap库会添加和删除工具提示元素.即使使用.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/

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.

解决方案

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/

这篇关于Bootstrap工具提示CSS更改可在文件中运行，但不适用于jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！