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

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

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

这是使用工具提示的地方：

但是当我尝试这个时：

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

元素。 离开目标时，将删除该新元素。

CSS始终存在并准备应用于元素，因此在hover时添加元素时始终应用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/