How do I get the tooltip background to extend or grow as I input more text?

[PD24]

I have a tooltip background-image that looks like this:

Picture of Tooltip Background

My css is like this:

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;

}

This is the jquery code:

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( '
' + this.t + '
' );



$('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();

})

I then apply the css class to the image on my page:

BUT how do i get the tooltip background to extend or grow as i input more text?
Thanks in advance..?

[KarimCossutti]

You should consider to re-create the graphics with css it would be the better way, because it would prevent the background to stretch to wired shapes.

here is a nice tutorial Link

[Mottie]

On StackOverflow, my user name is Fudgey and I added a comment to your post there basically saying the same as Karim.

If it’s a client forcing you to use that background image, then shrink the text or something, we’re not miracle workers.

[Author]

Posts