Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to generate content on mouse hover without using javascript

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 148
    Comment on it

    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>
    
    

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: