我在我的网站上使用qTip2,但 css 有一些问题。
我已包含以下文件:
jquery.qtip.min.js jquery.qtip.min.css
在 js 文件中,我添加了以下内容:
$.each($(".tooltip"), function (i, val) {
var theContent = $(val).html();
$(val).qtip({
content: {
text: theContent
},
position: {
my: "bottom left",
at: "top right",
viewport: $(window)
},
show: {
event: false,
ready: true
},
hide: {
effect: function () { $(this).slideUp(5, function () { $(this).dequeue(); }); }
},
style: {
classes: "ui-tooltip-shadow ui-tooltip-jtools"
}
});
});
到目前为止,一切都很好,问题是它会加载 jtools 主题,我需要对此进行自定义,所以我从 jquery.qtip.css 中提取 jtools 样式并将其放在我自己的 css 文件中,如下所示:
.ui-tooltip-shadow {
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
}
.ui-tooltip-shadow .ui-tooltip-titlebar, .ui-tooltip-shadow .ui-tooltip-content {
}
/* jQuery TOOLS Tooltip style */
.ui-tooltip-MySite{
background: #232323;
background: rgba(0, 0, 0, 0.7);
background-image: -moz-linear-gradient(top, #717171, #232323);
background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323));
border: 2px solid #ddd;
border: 2px solid rgba(241,241,241,1);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 0 12px #333;
-moz-box-shadow: 0 0 12px #333;
box-shadow: 0 0 12px #333;
}
/* IE Specific */
.ui-tooltip-MySite.ui-tooltip-titlebar{
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)";
}
.ui-tooltip-MySite.ui-tooltip-content{
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)";
}
.ui-tooltip-MySite.ui-tooltip-titlebar,
.ui-tooltip-MySite.ui-tooltip-content{
background: transparent;
color: white;
border: 0 dashed transparent;
}
.ui-tooltip-MySite.ui-tooltip-icon{
border-color: #555;
}
.ui-tooltip-MySite.ui-tooltip-titlebar .ui-state-hover{
border-color: #333;
}
在工具提示的声明中,我更改了:
classes: "ui-tooltip-shadow ui-tooltip-jtools"
至
classes: "ui-tooltip-shadow ui-tooltip-MySite"
问题是内容仍然获得黄色默认颜色吗?为什么?