當我輸入更多文本時，如何獲得工具提示背景以進行擴展或增長？

Question

我有一個提示的背景圖像，看起來像這樣：

tooltip-bg http://i55.tinypic.com/2cpc35w.png

我的CSS是這樣的：

p#vtip 
{ 
    display: none; 
    position: absolute; 
    padding: 10px; 
    left: 5px; 
    font-size: 13.5pt; 
    background:url("tooltip-bg.png") no-repeat; 
    border: 0px solid #a6c9e2; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    z-index: 9999; 
    height:48px; 
    width:140px; 
    color:White; 
} 

p#vtip #vtipArrow 
{ 
    position: absolute; 
    top: -10px; 
    left: 5px; 
} 

這是jQuery代碼：

this.vtip = function() {  
    this.xOffset = -10; // x distance from mouse 
    this.yOffset = 10; // y distance from mouse  

    $(".vtip").unbind().hover( 
     function(e) { 
      this.t = this.title; 
      this.title = ''; 
      this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); 

      $('body').append('<p id="vtip"><img id="vtipArrow" />' + this.t + '</p>'); 

      $('p#vtip #vtipArrow').attr("src", 'images/vtip_arrow.png'); 
      $('p#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow"); 

     }, 
     function() { 
      this.title = this.t; 
      $("p#vtip").fadeOut("slow").remove(); 
     } 
    ).mousemove(
     function(e) { 
      this.top = (e.pageY + yOffset); 
      this.left = (e.pageX + xOffset); 

      $("p#vtip").css("top", this.top+"px").css("left", this.left+"px"); 
     } 
    );    

}; 

jQuery(document).ready(function($){ 
    vtip(); 
}) 

我然後將css類應用於我的頁面上的圖像：

<div title="Bike" class="vtip"> 
<img alt="" class="img1" style="width: 248px; height: 163px;" src="bike.jpg" /><br /> 
</div> 

但是，我如何獲得工具提示背景來擴展或增長，因爲我輸入更多的文本？

Answer 1

這是我能找到你：

• 使用你的建議「斬」的方法：提示的http://trentrichardson.com/examples/csstooltips/
• 更多的例子（有些只是CSS，所以你會不會使用圖片避免你的當前問題）：http://coding.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/

我會去的CSS的方式，如果我是你：d