Hello readers , today we will discuss about generating light weight and easy to use tooltip using css3. Tooltips are a great way to show user more information by simply hovering over an image, text or hyperlinks. They can be used to provide caption to the images. When we hover mouse on image, content generated. Today I am going to show how to generate simple tooltip using html and css.

In this example , we have a wrapper class, in this wrapper class we have four span. On mouse hover on these span some content will generate
by using the property "content: attr(title);". On mouse out content will disappear by using the transition property of css3.

Html is written below
 

<div class="wrapper">
    <span  class="inner-wrapper" data-title="This is the Title of first content Block!">Content Block</span>
    <span  class="inner-wrapper" data-title="Generated title of content Block!, no JavaScript is used!">Content Block</span>
    <span  class="inner-wrapper" data-title="Hello are you there!">Content Block</span>
    <span  class="inner-wrapper" data-title="Generated content is awesome!">Content Block</span>
</div>

CSS code

<style>
.wrapper{counter-reset: cnt;position:relative;text-align:center;padding:20px 0;width:420px;height: 160px;margin: 0 auto;}
.wrapper::before{display: block;content:'Hover over these items:';font-size:18px;font-weight:bold;text-align:center;padding:15px;}
.wrapper .inner-wrapper{display:inline-block;padding:2px 6px;background-color:#78CCD2;color:#186C72;border-radius:4px;margin:3px;cursor:default;}
.wrapper .inner-wrapper::after{counter-increment: cnt;content:" #" counter(cnt);display:inline-block;padding:4px;}
.wrapper .inner-wrapper::before{position:absolute;bottom:0;left:0;width:100%;content:attr(data-title);color:#666;opacity:0;-webkit-transition:opacity 0.4s;transition:opacity 0.4s;}
.wrapper .inner-wrapper:hover::before{opacity:1;}
</style>