Two Click Events for speech bubbles

Question

i have a problem with jQuery and the click function. I want edit a speech bubble plugin from "http://gdakram.github.com/JQuery-Tooltip-Plugin". Here you can see, if you mouseover the button, it opens a speech bubble. I want this function with clicks, not with mouseover. My problem is, that this script is too complicated for me… this is one part (the js-data) from the website:

(function($) {

$.fn.tooltip = function(settings) {
// 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,
**'event_out': 'click',** 
}; 

Event in and event out didn’t work together… any ideas, what can i do?

Answer 1

This is rough, but should work — build your own 'toggle' like method:

 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_' : 'click' 

      //'event_in':'mouseover',
      //'event_out':'mouseout',
      //'hover_delay' : 0
    }; 

   if (settings) $.extend(config, settings);

 /**
  * Apply interaction to all the matching elements
  **/

 this.each(function() {

     toggleTip(this);   

 });

 /**
  * Positions the dialog box based on the target
  * element's location
  **/

 function toggleTip(tip) {  

    var count = 1;

    $(tip).bind(config._event_, function(e){

        e.stopPropagation();

        _hide(tip);

            count++ % 2 ? _show(tip) : _hide(tip);

     });

   };

In order for this to be truly effective you would need to re-think the _show() and _hide() functions.