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

    @Manojsb_evon
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 256
    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.

     

    1. <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    2. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    3. <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.

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

     

     

    The jquery code used for tool tip

    1. <script>
    2.   $(function() {
    3.  
    4.       /*  tool tip which will display on hover of First button  */
    5.  
    6.     $( "#effect1" ).tooltip({
    7.       show: {
    8.         effect: "slideDown",
    9.         delay: 250
    10.       }
    11.     });
    12.  
    13.     /*  tool tip which will display on hover of Second button  */
    14.  
    15.     $( "#effect2" ).tooltip({
    16.       hide: {
    17.         effect: "explode",
    18.         delay: 250
    19.       }
    20.     });
    21.  
    22.     /*  tool tip which will display on hover of Third button  */
    23.     
    24.     $( "#effect3" ).tooltip({
    25.       show: null,
    26.       position: {
    27.         my: "left top",
    28.         at: "left bottom"
    29.       },
    30.       open: function( event, ui ) {
    31.         ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
    32.       }
    33.     });
    34.   });
    35.   </script>

     

    html JQuery tool tip creation on hover tool tiip
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: