2012-10-26 10 views
16

मैं उपयोगकर्ता को कुछ गतिशील संदेश प्रदर्शित करने के लिए JQueryUI टूलटिप का उपयोग कर रहा हूं। मूल रूप से जब मैं कोई बटन क्लिक करता हूं तो मैं इनपुट फ़ील्ड के शीर्ष पर टूलटिप प्रदर्शित करना चाहता हूं।बटन पर JqueryUI टूलटिप अन्यत्र दिखाई देने के लिए होवर के बजाय क्लिक करें

जिस तरह से मैंने कोड किया है, वह केवल बटन के शीर्ष पर होवर करते समय काम करता है, और JQueryUI उदाहरणों में इस परिदृश्य को प्राप्त करने में कोई मदद नहीं है। मैं होवर प्रभाव से अलग कैसे हो सकता हूं और इसे बटन के क्लिक ईवेंट के साथ कैसे काम करूं? इसे कैसे प्राप्त किया जा सकता है?

मैं इसके लिए jquery-ui-1.9.0.custom.js और jquery-1.8.2.js का उपयोग कर रहा हूं।

एचटीएमएल कोड: मैं इस इनपुट बॉक्स

<input id="myInput" type="text" name="myInput" value="0" size="7" /> 

बटन जो मैं इन-ऑर्डर पर क्लिक करें टूलटिप

<input id="myBtn" type="submit" name="myBtn" value="myBtn" title="this is not used" class="myBtn" /> 

JQuery कोड पॉपअप के शीर्ष पर संदेश प्रदर्शित करना चाहते हैं

$(document).ready(function() { 
    $(".myBtn").tooltip({ 
       content: function() { 
        return '<span id="msg">Message</span>'; 
       }, 
       position: { 
        my: "center bottom", 
        at: "center top" 
       } 
      }); 
}); 

उत्तर

18

सबसे आसान तरीका myBtn की शीर्षक विशेषता को निकालना और अपने टूलटिप को किसी अन्य तत्व पर ले जाना है। उदाहरण के लिए:

<a id="myTooltip" title="Message"></a> 

तो फिर तुम कर सकते हैं:

$('#myTooltip').tooltip({ 
    //use 'of' to link the tooltip to your specified input 
    position: { of: '#myInput', my: 'left center', at: 'left center' } 
}); 

$('#myBtn').click(function() { 
    $('#myTooltip').tooltip('open'); 
}); 

इसी तरह आप स्वचालित रूप से खोलने के बाद टूलटिप बंद करने के लिए

$('#myTooltip').tooltip('close'); 

साथ टूलटिप बंद कर सकते हैं तो आप सिर्फ करने की जरूरत है open ईवेंट के अंदर close विधि को कॉल करें:

$('#myTooltip').tooltip({ 
    open: function (e) { 
     setTimeout(function() { 
      $(e.target).tooltip('close'); 
     }, 1000); 
    } 
}); 

का उपयोग e.target (this रूप open घटना के अंदर काम नहीं करेगा) और setTimeout() एक समय सीमा जिसके बाद टूलटिप बंद हो जाएगा स्थापित करने के लिए।

+1

मैंने दूसरे उपयोगकर्ता व्यवहार के अंदर घनिष्ठ घटना को जोड़ा और यह काम करता है। मदद के लिए Thx @Elliott – Swarne27

+0

क्या होगा यदि मैं प्रोग्राममैटिक खोलने के बाद स्वचालित रूप से टूलटिप को बंद करना चाहता हूं? – Swarne27

+0

कृपया मेरा संपादन देखें – Elliott

संबंधित मुद्दे