भाषण बुलबुले के लिए दो क्लिक ईवेंट

Question

मुझे jQuery और क्लिक फ़ंक्शन के साथ कोई समस्या है। मैं "http://gdakram.github.com/JQuery-Tooltip-Plugin" से भाषण बबल प्लगइन संपादित करना चाहता हूं। यहां आप देख सकते हैं, अगर आप बटन को माउसओवर करते हैं, तो यह एक भाषण बबल खोलता है। मैं इस समारोह को क्लिक के साथ चाहता हूं, माउसओवर के साथ नहीं। मेरे समस्या यह है, कि इस स्क्रिप्ट मेरे लिए बहुत जटिल है ... यह एक हिस्सा (जे एस-डेटा) की वेबसाइट से है:

(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',** 
}; 

घटना में और घटना बाहर एक साथ काम नहीं किया ... किसी भी विचार, क्या क्या मैं कर सकता हूँ?

Answer 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'

टूल टिप को छिपाने के लिए एक कोड लिखने हैं

Answer 2

»'event_in': 'mouseover', 'event_out': 'क्लिक करें'« सुंदर लगता है, लेकिन सही नहीं है ... ऐसा लगता है कि मैं इसे क्लिक ईवेंट के साथ बंद कर सकता हूं ... यह थोड़ा सा है ... "बदसूरत" ... क्षमा करें परिस्थितियां।

Answer 3

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); 
     }) 
    }); 

Answer 4

यह किसी न किसी तरह है, लेकिन काम करना चाहिए - विधि की तरह अपने खुद के 'टॉगल' का निर्माण:

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); 

    }); 

    }; 

आदेश में इस सही मायने में प्रभावी आप फिर से सोचने के लिए _show की आवश्यकता होगी होने के लिए() और _hide() फ़ंक्शंस।