Databases
StackOverflow2013
Postsdbo
POHow can I create a "tooltip tail" using pure CSS?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I create a "tooltip tail" using pure CSS?
    text
    copied!<p>I just came across a neat CSS trick. Check out the fiddle...</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png); display: block; height: 29px; width: 30px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;Cool Trick: &lt;br /&gt; &lt;div class="tooltiptail"&gt;&lt;/div&gt; &lt;/div&gt; &lt;br /&gt; &lt;div&gt;How do I get this effect with only CSS? &lt;br /&gt; &lt;div class="anothertail"&gt;&lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p>This creates a little arrow/triangle-like effect, a "tooltip tail". This blows my mind! <strong>I'm really interested in knowing how this works?!</strong></p> <p>Further, is there a way to extend this CSS trick to create an effect as follows:</p> <p><img src="https://i.stack.imgur.com/zRBKQ.png" alt="enter image description here"></p> <p>This is an interesting problem. Can this be done using only CSS, ignoring the shadow for now?</p> <hr> <h2>UPDATE 1</h2> <p>I figured out a solution to my initial question. Here's the fiddle... </p> <p><a href="http://jsfiddle.net/duZAx/7/" rel="noreferrer">http://jsfiddle.net/duZAx/7/</a></p> <p>HTML</p> <pre><code>&lt;div style="position: relative;"&gt;Cool Trick:&lt;br /&gt; &lt;div class="tooltiptail"&gt;&lt;/div&gt; &lt;div class="tooltiptail2"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>.tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .tooltiptail2 { display: block; border-color: transparent #ffffff transparent transparent; border-style: solid; border-width: 18px; width: 0px; height: 0px; position: relative; left: 4px; top: -38px; } </code></pre> <p>Now, how do I exactly mimic the little picture above using pure CSS, including the shadow and having it cross-browser compatible?</p> <hr> <h2>UPDATE 2</h2> <p>Here's my solution after a combination of the answers below. I haven't tested it across multiple browsers, but it looks great in Chrome. </p> <p><a href="http://jsfiddle.net/UnsungHero97/MZXCj/688/" rel="noreferrer">http://jsfiddle.net/UnsungHero97/MZXCj/688/</a></p> <p>HTML</p> <pre><code>&lt;div id="toolTip"&gt; &lt;p&gt;i can haz css tooltip&lt;/p&gt; &lt;div id="tailShadow"&gt;&lt;/div&gt; &lt;div id="tail1"&gt;&lt;/div&gt; &lt;div id="tail2"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>#toolTip { background-color: #ffffff; border: 1px solid #73a7f0; width: 200px; height: 100px; margin-left: 32px; position:relative; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: 0px 0px 8px -1px black; -moz-box-shadow: 0px 0px 8px -1px black; -webkit-box-shadow: 0px 0px 8px -1px black; } #toolTip p { padding:10px; } #tailShadow { background-color: transparent; width: 4px; height: 4px; position: absolute; top: 16px; left: -8px; z-index: -10; box-shadow: 0px 0px 8px 1px black; -moz-box-shadow: 0px 0px 8px 1px black; -webkit-box-shadow: 0px 0px 8px 1px black; } #tail1 { width: 0px; height: 0px; border: 10px solid; border-color: transparent #73a7f0 transparent transparent; position:absolute; top: 8px; left: -20px; } #tail2 { width: 0px; height: 0px; border: 10px solid; border-color: transparent #ffffff transparent transparent; position:absolute; left: -18px; top: 8px; } </code></pre> <hr>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload