The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #33472

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

    Picture of Tooltip Background

    My css is like this:

    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;

    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

    function(e) {
    this.t = this.title;
    this.title = ''; = (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","px").css("left", this.left+"px").fadeIn("slow");

    function() {
    this.title = this.t;
    function(e) { = (e.pageY + yOffset);
    this.left = (e.pageX + xOffset);

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



    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..?


    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


    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.