Kooltip - pure CSS3 tooltip

Lorem ipsumicyblue tooltipposition: bottom center, color: icyblue, width: 200px, title: none, animation: slide-up
<a href="#" class="kooltip"><span class="tooltip icyblue bottom center w200 slide-up">Lorem ipsum</span>icyblue tooltip</a>
Lorem ipsumskyblue tooltipposition: top center-left, color: skyblue, width: 150px, title: none, animation: fade
<a href="#" class="kooltip"><span class="tooltip skyblue top center-left w150 fade">Lorem ipsum</span>skyblue tooltip</a>
Lorem ipsumred tooltipposition: bottom center-right, color: red, width: 100px, title: none, animation: slide-left
<a href="#" class="kooltip"><span class="tooltip red bottom center-right w100 slide-left">Lorem ipsum</span>red tooltip</a>
KOOLTIPDonec eu libero sit amet quam egestas semper Donec eu libero sit amet quam egestas semper.purple tooltipposition: top left, color: purple, width: 250px, title: true, animation: slide-right
<a href="#" class="kooltip"><span class="tooltip purple top left w250 slide-right"><span class="title">KOOLTIP</span>Donec eu libero sit amet quam egestas semper Donec eu libero sit amet quam egestas semper.</span>purple tooltip</a>
KOOLTIPDonec eu libero sit amet quam egestas semper Donec eu libero sit amet quam egestas semper.magenta tooltipposition: bottom left-center, color: magenta, width: 150px, title: true, animation: slide-down
<a href="#" class="kooltip"><span class="tooltip magenta bottom left-center w150 slide-down"><span class="title">KOOLTIP</span>Donec eu libero sit amet quam egestas semper Donec eu libero sit amet quam egestas semper.</span>magenta tooltip</a>
smalleryellow tooltipposition: bottom left-right, color: yellow, width: 50px, title: none, animation: slide-down
<a href="#" class="kooltip"><span class="tooltip yellow bottom left-right w50 slide-down">smaller</span>yellow tooltip</a>
KOOLTIPLorem ipsum....olivegreen tooltipposition: top right, color: olivegreen, width: 150px, title: true, animation: none
<a href="#" class="kooltip"><span class="tooltip olivegreen top right w150"><span class="title">KOOLTIP</span>Lorem ipsum....</span>olivegreen tooltip</a>
KOOLTIPDonec eu libero sit amet quam egestas semper Donec eu libero sit amet quam egestas semper.grassgreen tooltipposition: bottom right-center, color: grassgreen, width: 400px, title: true, animation: slide-up
<a href="#" class="kooltip"><span class="tooltip grassgreen bottom right-center w400 slide-up"><span class="title">KOOLTIP</span>Donec eu libero sit amet quam egestas semper Donec eu libero sit amet quam egestas semper.</span>grassgreen tooltip</a>
KOOLTIPDonec eu libero sit amet quam egestas semper Donec eu libero sit amet quam egestas semper.black tooltipposition: top right-left, color: black, width: 450px, title: true, animation: slide-down
<a href="#" class="kooltip"><span class="tooltip black top right-left w450 slide-down"><span class="title">KOOLTIP</span>Donec eu libero sit amet quam egestas semper Donec eu libero sit amet quam egestas semper.</span>black tooltip</a>
brown tooltip position: top center, color: brown, width: 350px, title: true, animation: slide-left
<span class="kooltip"><img src="assets/images/scottwills_firetruck.jpg" width="175" height="119" /><span class="tooltip brown top center w350 slide-left"><span class="title">brown tooltip</span><img src="assets/images/scottwills_firetruck.jpg" width="350" height="238" /></span></span>
Enter your name (required) Enter your email adress (required) GO!! position: top left, color: orange, width: auto [default], title: none, animation: slide-down
<span class="kooltip"><span class="tooltip orange top left slide-down">Enter your name (required)</span><input name="kooltip1" type="text" value="" /></span><span class="kooltip"><span class="tooltip orange top left slide-down">Enter your email adress (required)</span><input name="kooltip2" type="text" value="" /></span><span class="kooltip"><span class="tooltip orange top left slide-down">GO!!</span><button>GO</button></span>