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


Tags: javascript,jquery,css,xhtml,tooltip

Problem :

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

tooltip-bg

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

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

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

But how do i get the tooltip background to extend or grow as i input more text?



Solution :

This is what I could find for you:

I'd go the CSS way if I were you :D


    CSS Howto..

    How to create a responsive sprite sheet animation in css?

    In how many ways and places we can place comment in CSS?

    How to change label color with html and CSS without js?

    CSS Dropdown menu - How to add thumbnails

    How to set css for first div, if there's no second div

    How to select an element that must have more than one css class?

    .addClass - How to call CSS from linked css?

    How to Make Image Do All 3: Cover (left-to-right), Resize, and Scroll

    Using two buttons on one div, how do you fade in slowly then fade out?

    How to get highlighted words and wrap it in new element with data-attribute?

    ASP.NET: How to set the css class of a Control during DataBind?

    How to design select box using css

    How to make a CSS rule act differently inside another div tag?

    How do I get this div to cover flash control (jw player)?

    How to combine bold and italic in CSS?

    How to create specified distance between the end of a line and the baseline of the second line using css

    How to hide some text in the middle of a string with only css [duplicate]

    How to edit the CSS of a selector in Polymer 1.0

    How to keep css style for only one element

    Using CSS, how can I control the line-height for master headline?

    How can I center Twitter-Bootstrap 3 navbar buttons?

    How to include .css file in smarty template file?

    How to color a responsive table in Bootstrap?

    How do I center a table?

    Manual JavaScript Slideshow with Dynamic images

    How to apply css using ng-class in angularjs

    How do I make the HTML Slider with CSS stay in the box?

    How to switch between multiple CSS animations?

    Show DIV message at every “X” number of minutes?

    How do I keep the 'hover' effect while using a Jquery color change effect while scrolling