Как настроить qTip2 CSS? - PullRequest
Новая
       4

Как настроить qTip2 CSS?

3 голосов
/ 04 января 2012

Я использую 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, мне нужно это оценить, поэтому я извлекаю стили jtools из jquery.qtip.css и помещаю его в свой собственный файл 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"

Проблема в том, что контент по-прежнему получает желтый цвет по умолчанию? почему?

Ответы [ 2 ]

2 голосов
/ 06 января 2012

Проблема в моей реализации состояла в том, что функция $ .each ($ (". Tooltip"), (i, val) должна быть в пределах $ (document) .ready (function ().

1 голос
/ 04 января 2012

Если вы используете этот код, вы можете применять CSS-стили, как если бы это был div 

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");
    });         
};

Пример в реальном времени

...