jQuery tooltip onClick?


Hello Everyone

If you are using JQueryUI tooltip Plugin to display some dynamic messages to the user and want to display the tooltip when a user clicks a button.

For that you have need to just edit in jquery.tooltip.js files

Find this code in your js files

     // Configuration setup 
     config = {  
       'dialog_content_selector' : 'div.tooltip_description', 
       'animation_distance' : 50, 
       //'opacity' : 0.85, 
       'arrow_left_offset' : 70, 
       'arrow_top_offset' : 50, 
       'arrow_height' : 20, 
       'arrow_width' : 20, 
       'animation_duration_ms' : 300, 
       'event_in':'mouseover', 
       'event_out':'mouseout', 
       'hover_delay' : 0 
     };

Replace with this

     // Configuration setup 
     config = {  
       'dialog_content_selector' : 'div.tooltip_description', 
       'animation_distance' : 50, 
       //'opacity' : 0.85, 
       'arrow_left_offset' : 70, 
       'arrow_top_offset' : 50, 
       'arrow_height' : 20, 
       'arrow_width' : 20, 
       'animation_duration_ms' : 300, 
       'event_in':'click', 

       'hover_delay' : 0 
     };

Find this code in your tooltip js files

$(this).bind(config.event_in,function(){ 
         var ele = this; 
         hoverTimer = setTimeout(function() { _show(ele); }, config.hover_delay) 
       })

Replace with this

$(this).bind(config.event_in,function(){ 
         var ele = this; 
         clearTimeout(hoverTimer); 
         _hide(this); 
         hoverTimer = setTimeout(function() { _show(ele); }, config.hover_delay) 
       })

tooltip

Enjoy Code!

http://blog.mrwebsolution.in/

Please Like & Share my blog on facebook https://www.facebook.com/aboutraghunath

Advertisements

Sr. Software Engineer

Tagged with: , ,
Posted in JQuery
3 comments on “jQuery tooltip onClick?
  1. preisner says:

    thanks. how can click another tip, close tip?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: