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

Question

我有一个工具提示背景图像，看起来像这样:

我的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