Tooltip V-2 Dengan CSS

Tooltip V-2 Dengan  CSS

CSS :

a { position: relative; cursor: pointer; font: normal normal 85% sans-serif; color: white; text-shadow: #FFF 0 -1px; display: inline-block;
}
a > i { text-align: center; font: italic normal 90% Georgia, serif; line-height: 150%; color: black; text-shadow: white 0 1px; background: #DDD; background-clip: padding-box; box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5); border: 5px solid #111; border: 5px solid rgba(0, 0, 0, 0.5); border-radius: 3px; position: absolute; width: 250px; left: 110%; margin-left:5px; padding: 10px 0;  bottom:0%; margin-bottom: -25px; visibility:hidden; opacity:0; -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; -ms-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; transition: opacity 0.5s linear;}
a > i:before, a > i:after { content: ""; position: absolute;
border-bottom: 10px solid transparent; border-right:10px solid transparent; top: 50%; left: 0%; margin-left: -10px;}
a > i:before { border-top: 13px solid #111; border-bottom: 13px solid #111; 
border-right:9px solid #111; border-top: 10px solid transparent; border-left: 10px solid transparent; border-bottom:10px solid transparent;
margin-left: -22px; z-index: 1;
}
a > i:after{
border-top: 10px solid #DDD; border-bottom: 10px solid #DDD; 
border-right:10px solid #DDD; border-top: 10px solid transparent; border-left: 10px solid transparent; border-bottom:10px solid transparent;
margin-left: -18px; z-index: 1;}
a:hover > i { visibility: visible; opacity: 1;}

HTML :

<a><a href="#">Hover Me! <i>Ini Contoh Tooltip Versi2<br />Yang Menggunakan Script CSS<br />Dengan Arah Panah Ke Kiri</i></a>

Ket. 
  Sesuaikan Text Sadow dan Colour Textnya Dengan Background Blog Sobat Supaya Warna Tulisannya Tidak Menyatu Dengan Warna Background Blog Sobat

Example :

Hover Me! Ini Contoh Tooltip Versi2
Yang Menggunakan Script CSS
Dengan Arah Panah Ke Kiri