Pure CSS Tooltips with unicode arrow and shadow

dabblet.css

/*
 *  Pure CSS Tooltips with unicode arrow and shadow
 */
.ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left {
  color:#ffffff;
  cursor:normal;
  display:-moz-inline-stack;
  display:inline-block;
  font-size:12px;
  font-family:arial;
  padding:.5em 1em;
  position:relative;
  text-align:center;
  text-shadow:0 -1px 1px #111111;
  border-radius:4px ;
  box-shadow:0 1px 2px #000000;
  background-color:#3b3b3b;
  background-image:-moz-linear-gradient(top,#555555,#222222);
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#555555),color-stop(1,#222222));
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
  -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
}
.ui-tooltip:after, .ui-tooltip-top:after, .ui-tooltip-right:after, .ui-tooltip-bottom:after, .ui-tooltip-left:after {
  content:"▾";
  display:block;
  font-size:2em;
  height:0;
  line-height:0;
  position:absolute;
    
   
}
.ui-tooltip:after, .ui-tooltip-bottom:after {
  color:#2a2a2a;
  bottom: -3px;
  left:1px;
  text-align:center;
  text-shadow:1px 0 2px #000000; 
  width:100%;
}
.ui-tooltip-top:after {
  bottom:auto;
  color:#4f4f4f;
  left:-2px;
  top:-2px;
  text-align:center;
  text-shadow:none;
  -o-transform:rotate(-180deg);
  -moz-transform:rotate(-180deg);
  -khtml-transform:rotate(-180deg);
  -webkit-transform:rotate(-180deg);
  width:100%;
}
.ui-tooltip-right:after {
  color:#222222;
  right:-0.375em;
  top:50%;
  margin-top:-.05em;
  text-shadow:0 1px 2px #000000;
  -o-transform:rotate(0);
  -moz-transform:rotate(0);
  -khtml-transform:rotate(0);
  -webkit-transform:rotate(0);
}
.ui-tooltip-left:after {
  color:#222222;
  left:-0.375em;
  top:50%;
  margin-top:.1em;
  text-shadow:0 -1px 2px #000000;
  -o-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -khtml-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
}

/* demo css */
h2 { margin: 2em 0 1em; }
p { margin: 0 0 1em; }

dabblet.html

<h1>Pure css tooltip box</h1>
<h2>.ui-tooltip (default)</h2> 
<p> 
    <span class="ui-tooltip">http://forrst.com/posts/Pure_css_tooltip_box_with_arrow_T_R_B_L-7kR</span> 
</p> 
<p> 
    <span class="ui-tooltip">My tooltip box<br />on several lines</span> 
</p> 
 
<h2>.ui-tooltip-top</h2> 
<p> 
    <span class="ui-tooltip-top">My tooltip box</span> 
</p> 
<p> 
    <span class="ui-tooltip-top">My tooltip box<br />on several lines</span> 
</p> 
 
<h2>.ui-tooltip-right</h2> 
<p> 
    <span class="ui-tooltip-right">My tooltip box</span> 
</p> 
<p> 
    <span class="ui-tooltip-right">My tooltip box<br />on several lines</span> 
</p> 
 
<h2>.ui-tooltip-bottom</h2> 
<p> 
    <span class="ui-tooltip-bottom">My tooltip box</span> 
</p> 
<p> 
    <span class="ui-tooltip-bottom">My tooltip box<br />on several lines</span> 
</p> 
 
<h2>.ui-tooltip-left</h2> 
<p> 
    <span class="ui-tooltip-left">My tooltip box</span> 
</p> 
<p> 
    <span class="ui-tooltip-left">My tooltip box<br />on several lines</span> 
</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}