我正在尝试自定义 .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 添加到页面...所以您立即调用 .css()
关于$(".tooltip-inner")
不匹配任何元素。当您将鼠标悬停在目标上时,Bootstrap 会添加 <div class="tooltip">
紧跟在目标之后的元素。当您离开目标时,该新元素将被删除。
CSS 始终存在并准备好应用于元素,因此当元素在悬停时添加时它始终会应用。
解决方案是绑定(bind) 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"
});
});
});
关于javascript - Bootstrap 工具提示 CSS 更改在文件中有效,但不适用于 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17737650/