0

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

4

1 回答 1

4

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

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

于 2013-07-19T03:58:15.987 回答