Как настроить 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, мне нужно это стоить, поэтому я извлекаю стили 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" 

Проблема заключается в том, что содержание этого до сих пор получить желтый цвет по умолчанию? Зачем?

Answer 1

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

Answer 2

Если вы используете этот код вы можете применить 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