How can I create a “tooltip tail” using pure CSS?

Here's an example with a box-shadow, all latest version browsers should support this.

Here's an example with a box-shadow, all latest version browsers should support this jsfiddle.net/MZXCj/1/ HTML: I can haz css tooltip CSS: body {font-family:Helvetica,Arial,sans-serif;} #toolTip { position:relative; } #toolTip p { padding:10px; background-color:#f9f9f9; border:solid 1px #a0c7ff; -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px; } #tailShadow { position:absolute; bottom:-8px; left:28px; width:0;height:0; border:solid 2px #fff; box-shadow:0 0 10px 1px #555; } #tail1 { position:absolute; bottom:-20px; left:20px; width:0;height:0; border-color:#a0c7ff transparent transparent transparent; border-width:10px; border-style:solid; } #tail2 { position:absolute; bottom:-18px; left:20px; width:0;height:0; border-color:#f9f9f9 transparent transparent transparent; border-width:10px; border-style:solid; }.

Awesome! I had a rather similar solution in mind but was lazy to make something after all that explaining I did :) +1 – BoltClock? Apr 11 at 15:58 @mdmullinax... epic!

When I get my upvoting privileges back, I'll give you a +1 – Hristo Apr 11 at 16:01 wow, great! A small bug: the shadow is also visible a little in the upper side of the tooltip – iuliux Apr 11 at 16:18 @iuliux... that bug can be easily fixed with z-index :) – Hristo Apr 11 at 16:27.

Here's an explanation to answer your first question (I'll leave the actual CSS to others as I'm lazy — please upvote their answers which you think deserve the votes! ): This creates a little arrow/triangle-like effect, a "tooltip tail". This blows my mind!

How does this work?! When rendering a border with varying edge colors but the same style (in your case, solid), the seam dividing each pair of adjacent corners is a diagonal line.It's quite similar to what the diagram here depicts of the groove, ridge, inset and outset border styles. By the content (original W3C) box model, a 40x40 area is created out of the 20-pixel borders, with the content dimensions being defined as 0x0.

Dividing a square with diagonal lines joining its four corners results in four right triangles whose right angles meet at the square's midpoint (see below). The top, bottom and left borders are white to match the background of the . Tooltiptail element's container, while the right border is a shade of blue to match the background color of the tooltip: border-color: #ffffff #a0c7ff #ffffff #ffffff; The result is this, with the borders labeled, and the border boundaries added using my trusty Line Tool: Reorienting the tooltip tail is simply a matter of switching the tooltip color around.

For example, this would yield a tail that's attached to the bottom of a tip: border-color: #a0c7ff #ffffff #ffffff #ffffff; jsFiddle.

Damn fast typing, was about to say same... +1 – easwee Apr 11 at 14:53 @thirtydot - he also wants to know why the first thing works :) – easwee Apr 11 at 14:54 1 @BoltClock... ohhhh that makes total sense. Thank you! – Hristo Apr 11 at 14:54 Well, I clearly suck at reading questions.It even said "I'm not worried about the shadow yet".

– thirtydot Apr 11 at 14:56 1 @BoltClock... when I get my upvoting privileges back, I'll give you a +1 – Hristo Apr 11 at 14:59.

jsfiddle.net/qar7r/ Shadow (looks bit weird in WebKit... gotta optimize it I guess): jsfiddle.net/ZFpHU/3/, jsfiddle.net/ZFpHU/1.

Archimedix... cool :) now I know 2 ways to do this, well 3 if you count using images. Care to go for the shadow effect? – Hristo Apr 11 at 15:49 Just edited it.

– Archimedix Apr 11 at 15:57 @Archimedix... looks great! When I get my upvoting privileges back, I'll give you a +1 – Hristo Apr 11 at 15:59 Another nice solution, good going +1 – BoltClock? Apr 11 at 16:00 Nice same as my second solution - I also managed to fix some of border transparency in IE6 - still need a solution for the wrapper of the arrow to display the border in ie6.

– easwee Apr 11 at 16:03.

I do this tooltip with only one div element. Look at my jsfiddle.net/DoubleYo/whbJb/5/ Edit for Hristo : First I have my normal div with border just like other exemple. The tail is a simple combination of CSS : I use the pseudo selector :before (:after works fine too) I force the content white a white space for make visible the tail.

I rotate my box from 45deg to fix the coin in the side of the tooltip No surprise for the size and the positioning. I add a border to the 2 sides I want. And finally I add the shadows to the outside border.

Sorry for my poor English... I recommend you to play with all this properties on my example you will understand better ;).

Pseudo-elements... a very neat trick! +1 – BoltClock? Apr 12 at 11:16 yo DoubleYo... can you please explain how that works?

Its friggin' awesome! – Hristo Apr 12 at 13:07 also... it doesn't work in IE. Any suggestions?

– Hristo Apr 12 at 13:48 @DoubleYo... thanks for explaining! – Hristo Apr 12 at 14:21 @Hristo Your welcome. And for IE I don't realy know how to do, but a see some article : samuli.hakoniemi.Net/… But its look to be dificult... "Bon courage!

" – DoubleYo Apr 12 at 14:26.

Crossbrowser approach: jsfiddle.net/easwee/QCuC6/ This one works from IE7+ (works in IE6 using (filter: chroma(color=white);) too but won't display the black border around the arrow, also jsfiddle renders things abit more ugly than in actual browser). UPDATE: * html . Arrow { border-bottom-color:white; border-left-color:white; border-right-color:white; filter: chroma(color=white); } * html .

Arrow I { border-bottom-color:white; border-left-color:white; border-right-color:white; filter: chroma(color=white); } This will make the ugly black transparecy that is rendered by IE6 the color you specified in chroma filter (i did white so it disappers in background). CSS 3 approach: You could do it with css3 rotation, but will fail in non css3 compliant browsers: jsfiddle.net/easwee/TebB2.

Easwee... cool! Would you be able to provide some more info on css3 rotation, links to tutorials and other resources? – Hristo Apr 11 at 15:17 @hristo - there is a dx filter for rotation in IE - but problem is that it takes only 4 values - msdn.microsoft.Com/en-us/library/ms532918%28v=vs.85%29.

Aspx – easwee Apr 11 at 15:19 That's pretty clever! – BoltClock? Apr 11 at 15:19 @easwee... I'm not too worried about IE, especially IE 6.

Thanks for pointing that out. Any IE bugs can easily be overcome with a conditional :) – Hristo Apr 11 at 15:20 @hristo css3 rotation is supported in IE9 only - so you still have to take care for ie7-8 which are still a standard to code for. But it's a start.

– easwee Apr 11 at 15:21.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.