CODEWITHSUNDEEP
cssbackground
Majid Fouladpour
Majid Fouladpour

Reputation: 30252

CSS - Styling a tooltip container

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

enter image description here

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?

Upvotes: 2

Views: 3455

Answers (2)

mwcz
mwcz

Reputation: 9311

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:

enter image description here

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.

Upvotes: 4

ottsch
ottsch

Reputation: 431

Try CSS Arrows: http://cssarrowplease.com/

Upvotes: 1

Related Questions