如何定制qTip2 css？

Question

我在我的网站上使用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"

问题是内容仍然是黄色的默认颜色吗？为什么？

Answer 1

我的实现中的问题是，函数($(“.tooltip”)，function (i，val)必须在$($.each).ready(function () )内。

Answer 2

如果使用此代码，则可以像应用div一样应用CSS样式

this.tooltip = function(){  
/* CONFIG */        
    xOffset = 10;
    yOffset = 20;       
    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result     
/* END CONFIG */        
$("img.tooltip").hover(function(e){                                           
    this.t = this.title;
    this.title = "";                                      
    $("body").append("<p id='tooltip'>"+ this.t +"</p>");
    $("#tooltip")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("fast");        
},
function(){
    this.title = this.t;        
    $("#tooltip").remove();
}); 
$("img.tooltip").mousemove(function(e){
    $("#tooltip")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px");
    });         
};

Live example here