2012-10-24 13 views
18

क्या jquery ui टूलटिप को मैन्युअल रूप से खोलने का कोई तरीका है? मैं सिर्फ एक क्लिक घटना पर प्रतिक्रिया/प्रतिक्रिया करना चाहता हूं। आप सभी माउस इवेंट्स को अनइंड कर सकते हैं और कॉलिंग करते समय उन्हें दोबारा जोड़ दिया जाएगा .tooltip ('open'), भले ही इसे ईवेंट इमेओ को प्रारंभ या सेट नहीं करना चाहिए, क्योंकि यदि आप इसे चलाने की कोशिश करते हैं तो .tooltip ('open') प्रारंभ किए बिना, यह शिकायत करता है शुरुआत के बारे में जोर से नहीं।jquery ui टूलटिप मैनुअल खुला/बंद

+2

मैं इसे मैन्युअल खोलने की आवश्यकता से गायब ले जाकर गायब है, लेकिन माउस ट्रैकिंग के साथ सक्षम होना चाहिए। यदि आप इसे मैन्युअल रूप से खोलते हैं तो माउस ट्रैक काम नहीं कर रहा है। – theblang

उत्तर

12

jltwoo, क्या मैं ऑटो-ओपन और ऑटो-क्लोज़ सक्षम करने के लिए दो अलग-अलग बूलियन स्विच का उपयोग करने का सुझाव दे सकता हूं? इस के साथ अपना कोड बदलें इस तरह दिखेगा:

(function($) { 
    $.widget("custom.tooltipX", $.ui.tooltip, { 
    options: { 
     autoShow: true, 
     autoHide: true 
    }, 

    _create: function() { 
     this._super(); 
     if(!this.options.autoShow){ 
     this._off(this.element, "mouseover focusin"); 
     } 
    }, 

    _open: function(event, target, content) { 
     this._superApply(arguments); 

     if(!this.options.autoHide){ 
     this._off(target, "mouseleave focusout"); 
     } 
    } 
    }); 

}(jQuery)); 

इस तरह, के रूप में टूलटिप आरंभ:

$(someDOM).tooltipX({ autoHide:false }); 

यह अपने आप में दिखाई देता है जब माउस तत्व खत्म हो गया है, लेकिन आप मैन्युअल रूप से बंद करने के लिए है यह।

आप मैन्युअल रूप से दोनों खुले और बंद क्रियाओं को नियंत्रित करना चाहते हैं, तो आप बस का उपयोग कर सकते हैं:

$(someDOM).tooltipX({ autoShow:false, autoHide:false }); 
+0

इस उत्तर पर काम करना मूर्ख - मैंने क्लिक को एक लाइनर से बांधने के लिए भी सरल बना दिया है! :) (असाइनमेंट अभिव्यक्ति आवंटित मान देता है) ::: https://jsfiddle.net/nuv8v1ct/ –

7

टूलटिप में एक अक्षम विकल्प है। खैर मैं इसे इस्तेमाल किया है और यहाँ कोड है:

$('a').tooltip({ 
    disabled: true  
}).click(function(){  
    if($(this).tooltip('option', 'disabled')) 
     $(this).tooltip('option', {disabled: false}).tooltip('open'); 
    else 
     $(this).tooltip('option', {disabled: true}).tooltip('close'); 
}).hover(function(){ 
    $(this).tooltip('option', {disabled: true}).tooltip('close'); 
}, function(){ 
    $(this).tooltip('option', {disabled: true}).tooltip('close'); 
}); 
+1

मैंने कोशिश की। हालांकि यह आपके उदाहरण में काम करता है, वास्तव में (कोड पढ़ने के बाद) माउसलीव पर टूलटिप के स्वचालित समापन को अवरुद्ध करने का कोई वास्तविक तरीका नहीं है। – hyperair

+4

यह काम करता है: बंद करें: फ़ंक्शन (ईवेंट, ui) {ui.tooltip.stop(); [लिंक] (http://jqueryui.com/tooltip/#custom-animation) – Hontoni

+1

@ एंटोनिमो जो कोड आपने दिखाया है वह केवल एनीमेशन को रोकता है, अगर आप वास्तव में डोमट्री की जांच करते हैं तो यह एकाधिक यूई-टूलटिप डीओएम बना रहा है, निश्चित रूप से कुछ नहीं पसंदीदा। दुर्भाग्यवश जिस तरह से jquery-ui टूलटिप को कोड किया गया है, माउसशिप/फोकसआउट ईवेंट "ओपन" ईवेंट के बाद संलग्न होते हैं ताकि टूलटिप को बंद होने से रोकने के लिए हम संलग्न होने के बाद उन घटनाओं को आसानी से हटा सकें। स्टेट वैरिएबल को मंजूरी मिलने के बाद ही करीबी घटना के साथ ही जाना जाता है, इसे रोकने में बहुत देर हो जाएगी। जब तक टूलटिप को और बेहतर नहीं किया जाता है, तब तक हमें इसे विस्तारित करना होगा और अपनी खुद की अनुकूलन करना होगा। – jltwoo

4

मेरे अन्य टिप्पणी करने के लिए संबंधित है, मैं मूल कोड में देखा और मैनुअल खोलने/बंद विजेट का विस्तार और संस्करण JQuery-यूआई v1 के साथ एक स्वतः छिपाएं विकल्प जोड़ने के द्वारा प्राप्त किया .10.3। असल में मैं केवल माउस श्रोताओं को हटा देता हूं जो _create और आंतरिक _open कॉल में जोड़े गए थे।

संपादित करें: रूप @MscG ने सुझाव दिया

डेमो यहाँ स्वतः छिपाएं और autoshow दो अलग-अलग झंडे के रूप में अलग किया गया: http://jsfiddle.net/BfSz3/

(function($) { 
    $.widget("custom.tooltipX", $.ui.tooltip, { 
    options: { 
     autoHide:true, 
     autoShow: true 
    }, 

    _create: function() { 
     this._super(); 
     if(!this.options.autoShow){ 
     this._off(this.element, "mouseover focusin"); 
     } 
    }, 

    _open: function(event, target, content) { 
     this._superApply(arguments); 

     if(!this.options.autoHide){ 
     this._off(target, "mouseleave focusout"); 
     } 
    } 
    }); 

}(jQuery)); 

अब जब आप प्रारंभ आप मैन्युअल रूप से टूलटिप के लिए सेट कर सकते हैं दिखाने या स्वतः छिपाएं स्थापना करके छिपाने: झूठी:

$(someDOM).tooltipX({ autoHide:false }); 

और के रूप में कहीं और

$(someDOM).tooltipX("open"); // displays tooltip 
$(someDOM).tooltipX("close"); // closes tooltip 

एक साधारण हॉटफिक्स की जरूरत है, जब तक मैं समय आधिकारिक पुल अनुरोध करना है, यह करने के लिए होगा बस सीधे अपने कोड में मानक खोलने/बंद कॉल करते हैं।

10

तुम सिर्फ घटनाओं निकल चाहते हैं और woudn't अपने स्वयं के कस्टम टूलटिप बनाने के लिए पसंद करते हैं।

$("#some-id").tooltip(tooltip_settings) 
      .on('mouseout focusout', function(event) { 
        event.stopImmediatePropagation(); 
      }); 

$("#some-id").attr("title", "Message"); 
$("#some-id").tooltip("open"); 

mouseout ब्लॉक tooltop माउस कर्सर

focusout ब्लॉक tooltop कीबोर्ड नेविगेशन