Geek asks and answers

Two Click Events for Speech Bubbles

I have a problem with jQuery and click function. I want to edit the speech bubble plugin from http://gdakram.github.com/JQuery-Tooltip-Plugin ". Here you can see if you hover over the button, the speech bubble will open. I want this function with clicks, and not with the mouse. My problem is that this script is too complicated for me ... this is one part (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',** 
};

The event and the event did not work together ... any ideas what can I do?

+5
source share
4 answers

It's rude, but should work - create your own toggle 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 location
  **/

 function toggleTip(tip) {  

    var count = 1;

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

        e.stopPropagation();

        _hide(tip);

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

     });

   };

For this to be truly effective, you will need to change your mind about the _show () and _hide () functions.

+1

, , ,

click for tooltip show 
mousemove for tooltip hide

(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',
    'event_out':'mousemove'
    };

event_out 'mousemove' 'mouseleave'

0

"'event_in': 'mouseover', 'event_out': 'click'" seems nice, but not perfect ... it appears before I can close it with a click event ... it's a little ... ugly. .. sorry for the circumstances.

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

     /**
      * Apply interaction to all the matching elements
      **/
     this.each(function() {
       var hoverTimer;
       $(this).bind(config.event_in,function(){
        _hide(this);
         var ele = this;
         hoverTimer = setTimeout(function() { _show(ele); }, config.hover_delay)
       })
       .bind(config.event_out,function(){
         clearTimeout(hoverTimer);
         _hide(this);
       })
     });
0
source

More articles:


All Articles