jQuery टूलटिप ऑनक्लिक?

Question

अब मैं एक लंबे समय के लिए तलाश कर दिया गया है और वह निम्नलिखित का इस्तेमाल करता है एक jQuery टूलटिप प्लगइन खोजने के लिए प्रतीत नहीं कर सकते हैं:
धूमिल कर दें (यह एक टॉगल बटन की तरह काम कर रही है, hover के बजाय)

onClick/फीड आउट

टूलटिप्स का उपयोग करने का विचार यह है कि मेरे पास कुछ लिंक हैं जिन्हें मैं सामग्री प्रदर्शित करना चाहता हूं। सामान्य टूलटिप्स (शायद यह कहां गलत हो गया है ..) होवरिंग के लिए हैं, इसे एक होना आवश्यक है इसे ट्रिगर करने वाले लिंक पर क्लिक करके टॉगल किया गया था।

क्या टूलटिप का उपयोग करने के लिए इसके लिए बेहतर विचार हैं?

Answer 1

मैं नहीं जानता कि आप कैसे तलाश कर दिया गया है, लेकिन jQuery टूलटिप के लिए एक त्वरित गूगल खोज मुझे दिया http://flowplayer.org/tools/tooltip/index.html (उनके स्क्रॉल प्लगइन कुछ समय के लिए अब वास्तव में ऐसा लगता है कि अपनी साइट से उपयोग किया गया, :)

:

jQuery टूलटिप आपको टूलटिप दिखाया या छुपाए जाने पर पूरी तरह से नियंत्रित करने की अनुमति देता है। आप विभिन्न प्रकार के तत्वों के लिए अलग-अलग ईवेंट निर्दिष्ट कर सकते हैं। आप घटनाओं विन्यास चर जो डिफ़ॉल्ट रूप से मान निम्न है के साथ इस व्यवहार को नियंत्रित कर सकते हैं:

events: { 
    def:  "mouseenter,mouseleave", // default show/hide events for an element 
    input: "focus,blur",    // for all input elements 
    widget: "focus mouseenter,blur mouseleave", // select, checkbox, radio, button 
    tooltip: "mouseenter,mouseleave"  // the tooltip element 
} 

'क्लिक' का उपयोग कर चाल करना चाहिए। (मैं इसे परीक्षण नहीं किया)

लेकिन, अगर बाकी सब विफल रहता है तो आप अभी भी नकली यह पटकथा एपीआई 'का उपयोग करके कर सकते हैं, बस .show फोन() और .hide()

संपादित करें:

क्लिक करने के बाद, क्लिक ठीक उसी तरह काम नहीं करता जैसा मैंने सोचा था, मैं आपको एक कामकाज प्रदान करता हूं। मुझे उम्मीद है कि एक ही परिणाम प्राप्त करने के लिए एक अच्छा तरीका है हालांकि। मैंने इसे http://flowplayer.org/tools/tooltip/index.html की स्थानीय प्रति के साथ परीक्षण किया और यह अपेक्षा के अनुसार काम करता है।

var tooltip = $("#dyna img[title]").tooltip({ 
    events: { 
     def:  ",", // default show/hide events for an element 
     tooltip: "click,mouseleave"  // the tooltip element 
    }, 
    // tweak the position 
    offset: [10, 2], 
    // use the "slide" effect 
    effect: 'slide' 
// add dynamic plugin with optional configuration for bottom edge 
}).dynamic({ bottom: { direction: 'down', bounce: true } }); 

tooltip.click(function() { 
    var tip = $(this).data("tooltip"); 
    if (tip.isShown(true)) 
     tip.hide(); 
    else 
     tip.show(); 
}); 

लेकिन मैं तुम्हें qTip पर एक नज़र के रूप में user834754 ने सुझाव दिया और साथ ही सुझाव है, आप इसे अधिक पसंद कर सकते हैं।

Answer 2

यू उपयोग qTip कोशिश कर सकते हैं, यू इस पर कोई jQuery घटना बाध्य कर सकते हैं:

show: { when: { event: 'click' } } 

एक सरल और सुंदर प्लगइन :) http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 3

यदि आप एक सरल, हल्के टूलटिप चाहें, तो आप विचार कर सकते हैं http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ फिर बस उस पर क्लिक करें jquery घटना को बांधें।

Answer 4

एक क्लिक ईवेंट पर एक jQuery UI टूलटिप (jQuery UI संस्करण 1.10.2) खोलना संभव है। शीर्षक उस तत्व के अलावा अन्य तत्व को विशेषता दें जिस पर टूलटिप प्रदर्शित किया जाना है।

<span id="helpbutton" title="This is tooltip text">Help</span> <!-- tootltip would be displayed on click on this --> 
<input id="inputbox"></input> <!-- help to be displayed for this element --> 

उस तत्व पर टूलटिप आरंभ करें जिसमें लक्ष्य तत्व पर सेट स्थिति के साथ शीर्षक विशेषता है।

$("#helpbutton").tooltip({position: {of: "#inputbox", at: "right"}}); 

कॉल खुला लक्ष्य तत्व पर क्लिक घटना के कॉलबैक फ़ंक्शन में टूलटिप पर।

$("helpbutton").click(function() { 
    $("#helpbutton").tooltip("open"); 
}); 

स्रोत: Floating help box with jQuery UI tooltip

Answer 5

तुम भी कर सकते हैं:

$("#myTooltip").tooltip().off("mouseover").on("click", function() { 
    if ($(this).attr("visible") === "1") { 
    $(this).attr("visible", "0"); 
    return $(this).tooltip("close"); 
    } else { 
    $(this).attr("visible", "1"); 
    return $(this).tooltip("open"); 
    } 
}).on("mouseleave", function(event) { 
    return event.stopImmediatePropagation(); 
});