dev

Tooltips एक स्क्रिप्ट है जो विशिष्ट एलिमेंट के ऊपर कर्सर मंडराने पर टूलटिप दिखाता है।

नोट: ध्यान रखें की मोबाइल फ़ोन का इस्तेमाल करने वाले सदस्य टूलटिप नहीं देख पाएंगे, तो टूलटिप का कंटेंट दिखने के एकमात्र साधन के रूप में प्रयोग न करें। उन्हें छोटे सार के लिए इस्तेमाल करना पृष्ठ के मुख्य कंटेंट के लिए इस्तेमाल करने से बेहतर है।

Installation

Usage

किसी विशिष्ट एलिमेंट के ऊपर कर्सर मंडराने पर दिखाए जाने वाले टूलटिप के लिए आपको एक विशेष क्लास जोड़ना होगा। कुछ टूलटिप data- एट्रिब्यूट द्वारा जोड़े अतिरिक्त पैरामीटर भी समर्थित करते हैं (और जानकारी के लिए कॉन्फ़िगरेशन देखे)।

तीन अलग तरह के टूलटिप होते हैं:

बुनियादी टूलटिप - क्लास
basic-tooltip
टूलटिप का यह प्रकार बस इस एलिमेंट के title के कंटेंट को दिखाएगा
<span class="basic-tooltip" title="टूलटिप में दिखाए जाने वाला टेक्स्ट">बेसिक टूलटिप</span>
बेसिक टूलटिप
उन्नत टूलटिप - क्लास: advanced-tooltip
इस टूलटिप के कंटेंट को tooltip-contents क्लास के एलिमेंट से लिया जाता है। एलिमेंट के कंटेंट को रेंडर भी किया जाता है - यह टूलटिप को फॉर्मेट करने के लिए विकि-मार्कअप और HTML एलिमेंट जोड़ने देता है। ध्यान रखें कि इन टूलटिपों को पृष्ठ के लोड पर लोड किया जाता है। ज़्यादा टूलटिप का इस्तेमाल करने पर पृष्ठ के लोड का समय-सीमा बहुत ज़्यादा बढ़ जाएगा (एक ही टूलटिप का बार-बार प्रयोग करने पर भी)।
<div class="advanced-tooltip" style="display:inline-block">उन्नत टूलटिप<div class="tooltip-contents">टूलटिप कंटेंट<br><code>HTML टैग सहित</code></div></div>
उन्नत टूलटिप
टूलटिप कंटेंट
HTML टैग सहित
Advanced tooltips will cause a new line when they're used inline if any of the tooltip content contains a block-level tag (regardless of styles), due to the MediaWiki parser automatically adding <p> tags to the subsequent text. This can be solved by wrapping the entire text in a <span> or <div> to suppress the automatic <p> tag, e.g.
<span>This is an example of <span class="advanced-tooltip">उन्नत टूलटिप<div class="tooltip-contents">Tooltip content</div></span> being used inline.</span>
This is an example of उन्नत टूलटिप
Tooltip content
 being used inline.
कस्टम टूलटिप - क्लास
आपका अपना
यह कांटे पृष्ठ लोड समय-सीमा के साथ टूलटिप के कंटेंट पर ज़्यादा-से-ज़्यादा नियंत्रन देता है। आप इस एलिमेंट के data- एट्रिब्यूट की मदद से टूलटिप बनाने के लिए टेम्पलेट जेनरेट कर सकते हैं और टेम्पलेट तक पैरामीटर भी पास कर सकते हैं। उन्नत टूलटिप के ऊपर इसका फायदा यह है कि यह ज़रुरत पड़ने पर ही टूलटिप लोड करता है और कई एलिमेंटों (सामान पैरामीटरों) के लिए एक ही टूलटिप को एक बार ही लोड करता है।
<span class="custom-tooltip-text" data-parameter="कोई वैल्यू">कस्टम टूलटिप – text</span>
कस्टम टूलटिप – text
<span class="custom-tooltip-parse" data-parameter="कोई वैल्यू">कस्टम टूलटिप – parse</span>
कस्टम टूलटिप – parse

कंबाइन करना

अलग-अलग टूलटिप को एक साथ दिखाने के लिए जोड़ा जा सकता है। इनका अनुक्रम क्लास के अनुक्रम जैसा है। 

<div class="advanced-tooltip basic-tooltip custom-tooltip-parse custom-tooltip-text" data-parameter="पैरामीटर">जोड़ा गया टूलटिप" style="display: inline-block;">उन्नत टूलटिप<div class="tooltip-contents">Advanced tooltip</div></div>
जोड़ा गया टूलटिप" style="display: inline-block;">उन्नत टूलटिप
Advanced tooltip

Configuration

बिना किसी सेटअप के, यह स्क्रिप्ट बस बुनियादी और उन्नत टूलटिप ही समर्थित करेगा। स्क्रिप्ट के कॉन्फ़िगरेशन के लिए तीन वेरिएबल उपलब्ध हैं। आप इन्हे अपने विकि के MediaWiki:Common.js पर जोड़ सकते हैं।

मुख्य "कॉन्फिग" – tooltips_config

इस ऑब्जेक्ट की मदद से आप कुछ मूल सुविधाओं को कस्टमाइज कर सकते हैं:

events
यह उन विंडो ऑब्जेक्टों के इवेंट के लिए एक जावास्क्रिप्ट लिस्ट है जो स्क्रिप्ट के इनिशियलाइज़ के समय उपस्थित न रहने वाले टूलटिपों के लिए एक तलाश ट्रिगर करते हैं। इस तरह आप पृष्ठ के लोड और स्क्रिप्ट के इनिशियलाइज़ होने के बाद के कस्टम इंटरफ़ेस में टूलटिप को सक्षम कर सकते हैं। उदाहरण है एक कस्टम दाया रेल मोडल।
noCSS
अगर आप डिफ़ॉल्ट CSS के इम्पोर्ट को अक्षम करना चाहते हैं, इसे ट्रू पर सेट करें।
offsetX / offsetY
कर्सर के पॉइंट करने पर टूलटिप इन वैल्यूों के हिसाब से ऊपर या नीचे दिखेगा (क्रमशः) (ध्यान रखें कि टूलटिप का मार्जिन भी इसे और दूर ले जा सकता है)। दोनों के लिए डिफ़ॉल्ट वैल्यू ८ है और ५ के नीचे की वैल्यू अनुशंसित नहीं है।
waitForImages
यह टूलटिप के अंदर चित्र रहने पर इसके स्वभाव को बदलेगा। डिफ़ॉल्ट से (false) टूलटिप उनके चित्र के लोड न होने पर भी दिखेंगे। चित्र लोड होने पर ही दिखते हैं (लोड में आलस)। इसे true पर सेट करने पर टूलटिप चित्र के पूरे लोड होने पर ही दिखेंगे।

"कॉन्फिग" ऑब्जेक्ट का उदाहरण: 

window.tooltips_config = {
    events: ['CustomEvent'],
    noCSS: true,
    offsetX: 5,
    offsetY: 10,
    waitForImages: true,
}

कस्टम टूलटिप के प्रकार बनाना – tooltips_list

आप इस ऐरे पर अपना कस्टम टूलटिप प्रकार जोड़ सकते हैं। टूलटिप का हर पकार इन प्रॉपर्टीयों के लिए ऑब्जेक्ट है:

classname
CSS क्लास जो इस प्रकार के टूलटिप को ट्रिगर करेगा।
onParsed
यह फंक्शन तब एक्सेक्यूट होगा जब जब पार्स किए गए कंटेंट को फेच किया जाएगा (जहाँ टूलटिप इसका कॉन्टेक्स्ट है - this)।
parse
text की तरह है पर अंजाम को पार्स किया जाएगा, जिससे एक छोटे समय में विकि सिंटेक्स दिखाया जान संभव होगा।
text
इस स्ट्रिंग या फंक्शन को टूलटिप के कंटेंट के लिए इस्तेमाल किया जाएगा।

Both text and parse can be either a string or a function.

अगर टूलटिप एक स्ट्रिंग है, आप उस एलिमेंट से लिए गए पैरामीटरों का इस्तेमाल कर सकते हैं जिस पर कर्सर मंडरा रहा है। पैरामीटर का इस्तेमाल करने के लिए आपको इसे टेक्स्ट में जोड़ना होगा: <#parameter-name#>। इस टैग को एलिमेंट के data-parameter-name एट्रिब्यूट से बदल दिया जाएगा। आप कई पैरामीटरों का और एक ही पैरामीटर का कई बार प्रयोग भी कर सकते हैं। 

{{Template|<#value#>}}  <!-- <#value#> को data-value एट्रिब्यूट के कंटेंट से बदल दिया जाएगा -->

दूसरा तरीका है बिना टूलटिप के किसी नए एलिमेंट पर कर्सर मंडराने पर एक्सेक्यूट किए जाने वाला एक फंक्शन स्पेसिफाई करना। फंक्शन का पास कॉन्टेक्स्ट के रूप में वह एलिमेंट है और उसे टूलटिप के कंटेंट को लौटाना होगा (या विकिटेक्सट से पार्स)। लौटाया गया स्ट्रिंग ऊपर दिए गए वाले की तरह एट्रिब्यूट समर्थित नहीं करता, क्योंकि आप खुद किसी भी एट्रिब्यूट तक पहुँच सकते हैं (उदाहरण: $(this).data('parameter-name'))।

टूलटिप के एक प्रकार के लिए बने ऑब्जेक्ट का उदाहरण: 

{
    classname: 'custom-tooltip',
    delay: 500,
    parse: '{'+'{Tooltip|<#name#>|<#value#>}}',   // '+' सेटिंग के पृष्ठ पर प्रयोग किए गए टेम्पलेट को मीडियाविकि से अनदेखा करवाता है
}

Example of an object with a parse function: 

{
    classname: 'custom-tooltip',
    delay: 500,
    parse: function parse(elem) { return '{'+'{Tooltip|' + $(elem).data('name') + '|' + $(elem).data('value') + '}}' },
}

साधारण प्रॉपर्टियाँ

{इन प्रॉपर्टियों को बिल्ट-इन (basic-tooltip और advanced-tooltip) सहित किसी भी प्रकार के लिए इस्तेमाल किया जा सकता है।

delay
जैसा इसका नाम - यह टूलटिप को मिलीसेकंड में दिए गए देर के बाद दिखाएगा। टिप: १ सेकंड = १००० मिलीसेकंड।
onShow / onHide
कुछ घटनाएँ हैं जो टूलटिप के दिखने और बंद हो जाने के वक़्त दिखाया जा सकता है। ये कॉलबैक फंक्शन हैं जिन का कॉन्टेक्स्ट (this) टूलटिप खुद ही है और होवर-हैंडल आर्गुमेंट है।

बुनियादी टूलटिप के व्यवहार को मॉडिफाई करते हुए दो कस्टम टूलटिपों के सेटिंग का उदाहरण: 

window.tooltips_list = [
    {
        classname: 'custom-tooltip-text',
        text: "Parameter: <#parameter#><br>यह बस टेक्स्ट और HTML है - विकिटेक्सट को पार्स '''नहीं''' किया जाएगा",",
    }, {
        classname: 'custom-tooltip-parse',
        parse: '{|style="white-space:nowrap;"\n!Parameter:\n|<#parameter#>\n|-\n!Lc:\n|{'+'{lc:<#parameter#>}}\n|-\n!Uc:\n|{'+'{uc:<#parameter#>}}\n|-\n!PAGENAME:\n|{'+'{PAGENAME}}\n|}',
    }, {
        classname: 'basic-tooltip',
        delay: 500,
        onHide: function(handle) { $(this).html($(handle).html()) },
    },
]

डिबग मोड – tooltips_debug

इसे true पर लगाने पर कुछ एलिमेंट दिखने लगेंगे, जिससे गलतियों को पकड़ना आसान हो जाएगा। यूआरएल के आखिर में ?ttdebug=true जोड़ कर डिबग मोड को अस्थायी रूप से भी चलाया जा सकता है। उदाहरण: https://dev.fandom.com/wiki/Tooltips?ttdebug=true

अतिरिक्त नोट और टिप

प्रदर्शन

अगर आपकी विकि इस स्क्रिप्ट का इस्तेमाल करती है, इसे इस सूचि में ज़रूर लगाएँ ताकि सब देख सके कि यह दिखता कैसा है

See also