CSS3 tooltips

different looking tooltips

by secretgspot

HTML

<div class="content">
            <h2>The basic bubble variants</h2>
            <p class="triangle-isosceles">This only needs one HTML element.</p>
            <p class="triangle-isosceles top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>
            <p class="triangle-isosceles left">But it could be any element you want.</p>
            <p class="triangle-isosceles right">The entire appearance is created only with CSS.</p>
            <p class="triangle-right">This only needs one HTML element.</p>
            <p class="triangle-right top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>
            <p class="triangle-right left">But it could be any element you want.</p>
            <p class="triangle-right right">The entire appearance is created only with CSS.</p>
            <p class="triangle-obtuse">This only needs one HTML element.</p>
            <p class="triangle-obtuse top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>
            <p class="triangle-obtuse left">But it could be any element you want.</p>
            <p class="triangle-obtuse right">The entire appearance is created only with CSS.</p>
            <p class="triangle-border">This only needs one HTML element.</p>
            <p class="triangle-border top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>
            <p class="triangle-border left">But it could be any element you want.</p>
            <p class="triangle-border right">The entire appearance is created only with CSS.</p>
            
            
            <h2>Simple examples</h2>
            
            <h3 class="example-commentheading">125 comments</h3>
            
            <blockquote class="example-right">
                <p>Design is directed toward human beings. To design is to solve human problems by identifying them and executing the best solution.</p>
            </blockquote>
            <p>Ivan Chermayeff</p>
            
            <blockquote class="example-obtuse">
    ...

CSS

/* 
 Should you want to set a background colour on a containing element
 certain types of bubble effect may require you to include these 
 style declarations.
 */
.content {
    position:relative;
    z-index:1;
}


/* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-isosceles {
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    color:#000;
    background:#f3961c; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

/* Variant : for top positioned triangle
------------------------------------------ */

.triangle-isosceles.top {
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
    background:-moz-linear-gradient(#f3961c, #f9d835);
    background:-o-linear-gradient(#f3961c, #f9d835);
    background:linear-gradient(#f3961c, #f9d835);
}

/* Variant : for left/right positioned triangle
------------------------------------------ */

.triangle-isosceles.left {
    margin-left:50px;
    background:#f3961c;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-isosceles.right {
    margin-right:50px;
    background:#f3961c;
}

/* THE...