JQUERY工具提示 - 造型特定的詞

Question

我有這個jQuery：

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 */   
    $("a.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(); 
    }); 
    $("a.tooltip").mousemove(function(e){ 
     $("#tooltip") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px"); 
    });   
}; 



// starting the script on page load 
$(document).ready(function(){ 
    tooltip(); 
}); 

這是使用稱爲CSS類「工具提示」，它有它font-variant:small-caps;。

所有的提示是小型股，很好看:)

工具提示被稱爲像這樣： <a href="#" class="tooltip" title="this is the tooltip">hover to see tooltip</a>

我想有一個或兩個詞的提示BOLD和全部小寫。 。 我該如何做到這一點，不要讓工具提示重置？

因此，而不是顯示爲：

這是TOOLTIP

我想：

這是TOOLTIP

任何想法？

Answer 1

您可以將某個類添加到要添加的文本中，然後通過CSS對其進行設置。 例如

$("a.tooltip").hover(function(e){            
     this.t = this.title; 
     this.title = "";          
     $("body").append("<p id='tooltip' class='tooltipText'>"+ this.t +"</p>"); 
     $("#tooltip") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px") 
      .fadeIn("fast");   
    }, 

然後是CSS：

.tooltipText 
{ 
    text-transform: uppercase; 
    /* any style you want */ 

}