I just came across a neat CSS trick. Check out the fiddle...
This creates a little arrow/triangle-like effect, a "tooltip tail". This blows my mind! I'm really interested in knowing how this works?!
Further, is there a way to extend this CSS trick to create an effect as follows:
This is an interesting problem. Can this be done using only CSS, ignoring the shadow for now?
I figured out a solution to my initial question. Here's the fiddle...
HTML
<div style="position: relative;">Cool Trick:<br />
<div class="tooltiptail"></div>
<div class="tooltiptail2"></div>
</div>
CSS
.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;
}
Now, how do I exactly mimic the little picture above using pure CSS, including the shadow and having it cross-browser compatible?
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.
http://jsfiddle.net/UnsungHero97/MZXCj/688/
HTML
<div id="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>
CSS
#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;
}
Here's an example with a box-shadow, all latest version browsers should support this
HTML:
<div id="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>
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;
}
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;
}
<div id="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>