3

Webサイトで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"

問題は、コンテンツがまだ黄色のデフォルト色を取得していることです。なぜ？

4

2 に答える 2

2

私の実装の問題は、$。each（$（ "。tooltip"）、関数（i、val）が$（document）.ready（function（）内になければならないことでした。

于 2012-01-06T11:24:56.563 に答える
1

このコードを使用すると、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");
    });         
};

ここでの実例

于 2012-01-04T17:00:57.317 に答える