Javascript 当我输入更多文本时，如何使工具提示背景扩展或增长？

我有一个工具提示背景图像，如下所示：

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

我的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();
}) 

this.vtip=function（）{
this.xOffset=-10；//x距离鼠标的距离
this.yOffset=10；//距离鼠标y的距离
$（“.vtip”）.unbind（）.hover（
职能（e）{
this.t=this.title；
this.title=''；
this.top=（e.pageY+yOffset）；this.left=（e.pageX+xOffset）；
$（'body'）。追加（'

然后，我将css类应用于页面上的图像：
<div title="Bike" class="vtip">
<img alt="" class="img1" style="width: 248px; height: 163px;" src="bike.jpg" /><br />
</div>





但是，当我输入更多文本时，如何使工具提示背景扩展或增长？
这是我可以为您找到的：


使用您建议的“斩波”方法：
更多工具提示示例（有些只是css，不使用图像，因此可以避免当前问题）：

如果我是你，我会选择CSS方式：d
你是想扩展背景图像吗？它有自己的宽度和高度。除非你想拉伸图像，否则我看不到一种方法。@Elaine Marley:是的，扩展工具提示，使其随着添加更多文本而变得更宽更大。我真的不想拉伸图像。图像就是这样，我想如果添加更多文本，可以使div增大，但不能使图像增大。将工具提示背景分为开始、中间和结束两部分如何？这样行吗？您需要的是。使用现有图像的问题是，您只能水平拉伸它，垂直拉伸看起来会很糟糕。而且，如果您在工具提示中有大量内容，则工具提示，你最好的选择是使用css渐变背景，而不是@Elaine所说的图像。我知道，我也会选择css选项，但设计是这样的，所以我必须让它完全像那样。