Question

I have a background image used as tooltip container’s background. The image is shown below:

It is used like this:

.tooltip {
    display:none;
    background:url(images/black_arrow_big.png);
    height:163px;
    padding:40px 30px 10px 30px;
    width:310px;
    font-size:11px;
    color:#fff;
}

<div class="tooltip">Tolltip text goes here</div>

However all tooltips do not have the same amount of text, so I need a way to make the container bigger or smaller based on the amount of text. How should I do this? Does sliding door technique allow both horizontal and vertical resizing? How?

Also, could I have the same diagonal gradient if I use a sliding door technique? If not, any alternatives?

Answer 1

Update this can be done using pure CSS. Example.

Good question. Right now, it looks like your drop shadow is part of the PNG image, and that’s not resizable, as you know. You can use CSS3 drop shadows, which will adapt to the size of the container. The problem with that is, you can only add those shadows to text, or boxes (not arrows!).

I think your best option is to add a drop shadow to the box with CSS3, and have a PNG image of JUST the arrow, kind of like this:

It may take a little adjustment to get it aligned perfectly, but it will allow the box to resize based on the content.

.tooltip {
    display:none;
    padding:40px 30px 10px 30px;
    font-size:11px;
    color:#fff;

    position: relative;
    background: #000;

    /* rounded corners */
    -webkit-border-radius: 2px; 
       -moz-border-radius: 2px; 
            border-radius: 2px;

    /* box shadow */
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
       -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
            box-shadow: 0px 0px 10px rgba(0,0,0,0.3);

    /* background gradient, see http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.08, rgb(0,0,0)),
        color-stop(0.57, rgb(48,48,48))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(0,0,0) 8%,
        rgb(48,48,48) 57%
    );
}

.tooltip_arrow {
    position: absolute;
    bottom: -37px; /* 37px is the height of the black_arrow.png */
    left: 45%; /* roughly centered... you can decide how to best do this */
}

<div class="tooltip">
    Tolltip text goes here
    <img src="images/black_arrow.png" class="tooltip_arrow" />
</div>

I haven’t tested this, but I hope it gives a good start.