Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Stylish tool tip display on hover of an element with the help of jquery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 242
    Comment on it

    How to use stylish tool tip on hover of an element with jquery


    To use the jquery basic tool tip you have to first include the following basic jquery file with another two. One will be use for jquery tool tip effect and other for tool tip css.

     

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


     

    The HTML code on which the tool tip will be applied.

    <div style="margin-bottom:40px;">
      <button id="effect1" href="#" title="slide down on show">Example 1</button>
    </div>
    <div style="margin-bottom:40px;">
      <button id="effect2" href="#" title="explode on hide">Example 2</button>
    </div>
    <div style="margin-bottom:40px;">
      <button id="effect3" href="#" title="move down on show">Example 3</button>
    </div>

     

     

    The jquery code used for tool tip

    <script>
      $(function() {
    
          /*  tool tip which will display on hover of First button  */
    
        $( "#effect1" ).tooltip({
          show: {
            effect: "slideDown",
            delay: 250
          }
        });
    
        /*  tool tip which will display on hover of Second button  */
    
        $( "#effect2" ).tooltip({
          hide: {
            effect: "explode",
            delay: 250
          }
        });
    
        /*  tool tip which will display on hover of Third button  */
        
        $( "#effect3" ).tooltip({
          show: null,
          position: {
            my: "left top",
            at: "left bottom"
          },
          open: function( event, ui ) {
            ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
          }
        });
      });
      </script>

     

 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: