in English

टूलटिप्स

स्थानीय शीर्षक भण्डारणको लागि एनिमेसनहरू र डेटा-विशेषताहरूका लागि CSS3 प्रयोग गरेर CSS र JavaScript सँग अनुकूलन बुटस्ट्र्याप टूलटिपहरू थप्नका लागि दस्तावेज र उदाहरणहरू।

अवलोकन

टुलटिप प्लगइन प्रयोग गर्दा जान्नुपर्ने कुराहरू:

  • टूलटिपहरू पोजिसनिङका लागि तेस्रो पार्टी लाइब्रेरी पोपरमा भर पर्छन् । तपाईंले bootstrap.js अघि popper.min.js समावेश गर्नुपर्दछ वा टूलटिपहरू काम गर्नको लागि पप्पर समावेश गर्ने bootstrap.bundle.min.js/ प्रयोग गर्नुहोस्!bootstrap.bundle.js
  • यदि तपाइँ स्रोतबाट हाम्रो जाभास्क्रिप्ट निर्माण गर्दै हुनुहुन्छ भने, यसलाई आवश्यक छutil.js ।
  • टूलटिपहरू प्रदर्शनका कारणहरूका लागि अप्ट-इन हुन्छन्, त्यसैले तपाईंले तिनीहरूलाई आफैं सुरु गर्नुपर्छ ।
  • शून्य-लम्बाइ शीर्षकहरू भएका उपकरणटिपहरू कहिल्यै प्रदर्शित हुँदैनन्।
  • container: 'body'थप जटिल कम्पोनेन्टहरू (जस्तै हाम्रो इनपुट समूहहरू, बटन समूहहरू, आदि) मा रेन्डरिङ समस्याहरूबाट बच्न निर्दिष्ट गर्नुहोस्।
  • लुकेका तत्वहरूमा ट्रिगर गर्ने टूलटिप्सले काम गर्दैन।
  • .disabledर्‍यापर तत्वमा वा तत्वहरूका लागि टुलटिपहरू disabledट्रिगर गरिनु पर्छ।
  • हाइपरलिङ्कहरूबाट ट्रिगर गर्दा धेरै रेखाहरू फैलिएको छ, टूलटिपहरू केन्द्रित हुनेछन्। यो व्यवहारबाट बच्न white-space: nowrap;आफ्नो s मा प्रयोग गर्नुहोस्।<a>
  • DOM बाट सम्बन्धित तत्वहरू हटाइनु अघि टूलटिपहरू लुकाउनु पर्छ।
  • छाया DOM भित्रको तत्वको लागि उपकरणटिपहरू ट्रिगर गर्न सकिन्छ।
पूर्वनिर्धारित रूपमा, यो कम्पोनेन्टले बिल्ट-इन सामग्री सेनिटाइजर प्रयोग गर्दछ, जसले स्पष्ट रूपमा अनुमति नभएको कुनै पनि HTML तत्वहरूलाई बाहिर निकाल्छ। थप विवरणहरूको लागि हाम्रो JavaScript कागजातमा सेनिटाइजर खण्ड हेर्नुहोस् ।
यस कम्पोनेन्टको एनिमेसन प्रभाव prefers-reduced-motionमिडिया क्वेरीमा निर्भर हुन्छ। हाम्रो पहुँच कागजातको घटाइएको गति खण्ड हेर्नुहोस् ।

त्यो सबै पाउनुभयो? राम्रो, तिनीहरूले केही उदाहरणहरू कसरी काम गर्छन् हेरौं।

उदाहरण: जताततै टुलटिप्स सक्षम गर्नुहोस्

पृष्ठमा सबै टूलटिपहरू प्रारम्भ गर्ने एउटा तरिका तिनीहरूको विशेषताद्वारा तिनीहरूलाई चयन गर्नु हो data-toggle:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

उदाहरणहरू

टूलटिपहरू हेर्न तलको लिङ्कहरूमा होभर गर्नुहोस्:

प्लेसहोल्डर पाठ टुलटिप्सको साथ केही इनलाइन लिङ्कहरू प्रदर्शन गर्न। यो अब केवल फिलर हो, कुनै हत्यारा छैन। वास्तविक पाठको उपस्थिति नक्कल गर्न यहाँ राखिएको सामग्री । र ती सबै तपाईंलाई वास्तविक-विश्व परिस्थितिहरूमा प्रयोग गर्दा टूलटिपहरू कस्तो देखिन्छ भनेर एक विचार दिनको लागि। त्यसोभए आशा छ कि तपाईंले अब देख्नुभएको छ कि लिङ्कहरूमा यी टूलटिपहरूले कसरी व्यवहारमा काम गर्न सक्छन्, एकपटक तपाईंले तिनीहरूलाई आफ्नै साइट वा परियोजनामा ​​प्रयोग गर्नुभयो।

माथि, दायाँ, तल र बायाँ: चार टुलटिप्स निर्देशनहरू हेर्न तलका बटनहरूमा होभर गर्नुहोस्।

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

र अनुकूलन HTML को साथ थपियो:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

प्रयोग

टूलटिप प्लगइनले मागमा सामग्री र मार्कअप उत्पन्न गर्दछ, र पूर्वनिर्धारित रूपमा तिनीहरूको ट्रिगर तत्व पछि उपकरणटिपहरू राख्छ।

जाभास्क्रिप्ट मार्फत टूलटिप ट्रिगर गर्नुहोस्:

$('#example').tooltip(options)
ओभरफ्लो autoरscroll

टुलटिप स्थिति स्वचालित रूपमा परिवर्तन गर्ने प्रयास गर्दछ जब अभिभावक कन्टेनरमा overflow: autoहाम्रो overflow: scrollमनपर्छ .table-responsive, तर अझै पनि मूल प्लेसमेन्टको स्थिति राख्छ। समाधान गर्नको लागि, boundaryपूर्वनिर्धारित मान बाहेक अन्य कुनै पनि कुरामा विकल्प सेट गर्नुहोस् 'scrollParent', जस्तै 'window':

$('#example').tooltip({ boundary: 'window' })

मार्कअप

टुलटिपको लागि आवश्यक मार्कअप एउटा dataविशेषता मात्र हो र titleHTML तत्वमा तपाईंले टुलटिप पाउन चाहनुहुन्छ। टुलटिपको उत्पन्न मार्कअप एकदम सरल छ, यद्यपि यसलाई स्थिति चाहिन्छ (पूर्वनिर्धारित रूपमा, प्लगइनद्वारा सेट गरिएको top)।

किबोर्ड र सहायक टेक्नोलोजी प्रयोगकर्ताहरूको लागि टूलटिपहरू काम गर्ने

तपाईंले परम्परागत रूपमा किबोर्ड-फोकसयोग्य र अन्तरक्रियात्मक (जस्तै लिङ्कहरू वा फारम नियन्त्रणहरू) HTML तत्वहरूमा टूलटिपहरू थप्नु पर्छ। यद्यपि स्वेच्छाचारी HTML तत्वहरू (जस्तै <span>s) विशेषता थपेर फोकसयोग्य बनाउन सकिन्छ tabindex="0", यसले किबोर्ड प्रयोगकर्ताहरूको लागि गैर-अन्तर्क्रियात्मक तत्वहरूमा सम्भावित कष्टप्रद र भ्रामक ट्याब स्टपहरू थप्नेछ, र धेरै सहयोगी प्रविधिहरूले हाल यस अवस्थामा टूलटिप घोषणा गर्दैनन्। थप रूपमा, तपाइँको टुलटिपको लागि ट्रिगरको रूपमा मात्र भर hoverपर्नुहोस्, किनकि यसले तपाइँको टूलटिपहरूलाई किबोर्ड प्रयोगकर्ताहरूको लागि ट्रिगर गर्न असम्भव बनाउनेछ।

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

असक्षम तत्वहरू

विशेषता भएका तत्वहरू disabledअन्तरक्रियात्मक हुँदैनन्, यसको मतलब प्रयोगकर्ताहरूले टुलटिप (वा पपओभर) ट्रिगर गर्न फोकस गर्न, होभर गर्न वा क्लिक गर्न सक्दैनन्। एक समाधानको रूपमा, तपाईले टुलटिपलाई र्‍यापरबाट ट्रिगर गर्न चाहनुहुन्छ <div>वा <span>, आदर्श रूपमा किबोर्ड-फोकस गर्न मिल्ने बनाइएको प्रयोग गरेर , र असक्षम गरिएको तत्वमा tabindex="0"ओभरराइड गर्न चाहनुहुन्छ।pointer-events

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-animation=""।

नोट गर्नुहोस् कि सुरक्षा कारणहरूको लागि sanitize, sanitizeFnर whiteListविकल्पहरू डेटा विशेषताहरू प्रयोग गरेर आपूर्ति गर्न सकिँदैन।
नाम टाइप गर्नुहोस् पूर्वनिर्धारित विवरण
एनिमेसन बुलियन सत्य टुलटिपमा CSS फेड ट्रान्जिसन लागू गर्नुहोस्
कन्टेनर तार | तत्व | गलत गलत

विशेष तत्वमा टुलटिप जोड्छ। उदाहरण container: 'body':। यो विकल्प विशेष गरी उपयोगी छ कि यसले तपाईंलाई टुलटिपलाई ट्रिगर गर्ने तत्वको नजिक कागजातको प्रवाहमा राख्न अनुमति दिन्छ - जसले टुलटिपलाई सञ्झ्याल रिसाइज गर्दा ट्रिगर गर्ने तत्वबाट टाढा जानबाट रोक्छ।
ढिला नम्बर | वस्तु ०

टुलटिप (ms) देखाउन र लुकाउन ढिलाइ - म्यानुअल ट्रिगर प्रकारमा लागू हुँदैन

यदि नम्बर प्रदान गरिएको छ भने, ढिलाइ लुकाउने/देखाउन दुवैमा लागू हुन्छ

वस्तु संरचना हो:delay: { "show": 500, "hide": 100 }
html बुलियन गलत

टूलटिपमा HTML लाई अनुमति दिनुहोस्।

यदि सही छ भने, टूलटिपमा HTML ट्यागहरू टुलटिपमा titleरेन्डर गरिनेछ। यदि गलत छ भने, textDOM मा सामग्री घुसाउन jQuery को विधि प्रयोग गरिनेछ।

यदि तपाईं XSS आक्रमणहरूको बारेमा चिन्तित हुनुहुन्छ भने पाठ प्रयोग गर्नुहोस्।
नियुक्ति तार | समारोह 'माथि'

टूलटिप कसरी राख्ने - स्वत: | शीर्ष | तल | बायाँ | सही।
जब autoनिर्दिष्ट गरिएको छ, यसले गतिशील रूपमा टूलटिपलाई पुन: दिशा दिनेछ।

जब एक प्रकार्य स्थान निर्धारण गर्न प्रयोग गरिन्छ, यसलाई पहिलो तर्कको रूपमा टुलटिप DOM नोड र दोस्रोको रूपमा ट्रिगर गर्ने तत्व DOM नोडसँग बोलाइन्छ। thisसन्दर्भ टूलटिप उदाहरणमा सेट गरिएको छ ।
चयनकर्ता तार | गलत गलत यदि चयनकर्ता प्रदान गरिएको छ भने, टुलटिप वस्तुहरूलाई निर्दिष्ट लक्ष्यहरूमा प्रत्यायोजित गरिनेछ। jQuery.onअभ्यासमा, यो गतिशील रूपमा थपिएका DOM तत्वहरू ( समर्थन) मा टूलटिपहरू लागू गर्न प्रयोग गरिन्छ । यो र एक जानकारीमूलक उदाहरण हेर्नुहोस् ।
टेम्प्लेट तार '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

टूलटिप सिर्जना गर्दा प्रयोग गर्नको लागि आधार HTML।

टुलटिपहरू मा सुई titleदिइनेछ .tooltip-inner।

.arrowटुलटिपको तीर बन्नेछ।

सबैभन्दा बाहिरी र्यापर तत्वमा .tooltipवर्ग र role="tooltip".
शीर्षक तार | तत्व | समारोह ''

titleयदि विशेषता अवस्थित छैन भने पूर्वनिर्धारित शीर्षक मान ।

thisयदि कुनै प्रकार्य दिइएको छ भने, यसलाई टुलटिप जोडिएको तत्वमा सेट गरिएको सन्दर्भको साथ बोलाइनेछ ।
ट्रिगर तार 'होभर फोकस'

टूलटिप कसरी ट्रिगर हुन्छ - क्लिक गर्नुहोस् | होभर | फोकस | म्यानुअल। तपाईले धेरै ट्रिगरहरू पास गर्न सक्नुहुन्छ; तिनीहरूलाई स्पेसको साथ अलग गर्नुहोस्।

'manual'.tooltip('show')संकेत गर्दछ कि टूलटिप , .tooltip('hide')र .tooltip('toggle')विधिहरू मार्फत प्रोग्रामेटिक रूपमा ट्रिगर हुनेछ ; यो मान कुनै अन्य ट्रिगरसँग जोड्न सकिँदैन।

'hover'किबोर्ड मार्फत ट्रिगर गर्न नसकिने टुलटिप्सको आफ्नै परिणाम हुनेछ, र किबोर्ड प्रयोगकर्ताहरूका लागि समान जानकारी प्रदान गर्ने वैकल्पिक विधिहरू अवस्थित छ भने मात्र प्रयोग गर्नुपर्छ।
अफसेट नम्बर | तार | समारोह ०

यसको लक्ष्य सापेक्ष टूलटिपको अफसेट।

जब एक प्रकार्य अफसेट निर्धारण गर्न प्रयोग गरिन्छ, यसलाई पहिलो तर्कको रूपमा अफसेट डेटा समावेश गरिएको वस्तुसँग बोलाइन्छ। प्रकार्यले एउटै संरचना भएको वस्तु फिर्ता गर्नुपर्छ। ट्रिगर गर्ने तत्व DOM नोड दोस्रो तर्कको रूपमा पारित गरिएको छ।

थप जानकारीको लागि Popper अफसेट कागजातहरू हेर्नुहोस् ।
फलब्याक प्लेसमेन्ट तार | array 'फ्लिप' पप्परले फलब्याकमा कुन स्थिति प्रयोग गर्ने छ भनी निर्दिष्ट गर्न अनुमति दिनुहोस्। थप जानकारीको लागि Popper को व्यवहार कागजातहरू सन्दर्भ गर्नुहोस्
customClass तार | समारोह ''

यो देखाइएको बेला टुलटिपमा कक्षाहरू थप्नुहोस्। नोट गर्नुहोस् कि यी कक्षाहरू टेम्प्लेटमा निर्दिष्ट गरिएका कुनै पनि कक्षाहरू बाहेक थपिनेछन्। धेरै कक्षाहरू थप्न, तिनीहरूलाई खाली ठाउँहरूद्वारा छुट्याउनुहोस् 'a b':।

तपाइँ एक प्रकार्य पास गर्न सक्नुहुन्छ जुन अतिरिक्त वर्ग नामहरू समावेश भएको एकल स्ट्रिङ फर्काउनु पर्छ।
सीमा तार | तत्व 'स्क्रोल अभिभावक' टुलटिपको ओभरफ्लो अवरोध सीमा। 'viewport', 'window', 'scrollParent', वा HTMLElement सन्दर्भ (जाभास्क्रिप्ट मात्र) को मानहरू स्वीकार गर्दछ । थप जानकारीको लागि Popper's preventOverflow कागजातहरू हेर्नुहोस् ।
सेनिटाइज गर्नुहोस् बुलियन सत्य सेनिटाइजेसन सक्षम वा असक्षम पार्नुहोस्। यदि सक्रिय भयो 'template'र 'title'विकल्पहरू सफा गरिनेछ। हाम्रो JavaScript कागजातमा सेनिटाइजर खण्ड हेर्नुहोस् ।
सेतोसूची वस्तु पूर्वनिर्धारित मान अनुमति दिइएको विशेषताहरू र ट्यागहरू समावेश गर्ने वस्तु
sanitizeFn शून्य | समारोह खाली यहाँ तपाईं आफ्नो सेनिटाइज प्रकार्य आपूर्ति गर्न सक्नुहुन्छ। यदि तपाइँ एक समर्पित पुस्तकालय प्रयोग गर्न रुचाउनुहुन्छ भने यो उपयोगी हुन सक्छ सरसफाई प्रदर्शन गर्न।
popperConfig शून्य | वस्तु खाली Bootstrap को पूर्वनिर्धारित Popper कन्फिगरेसन परिवर्तन गर्न, Popper को कन्फिगरेसन हेर्नुहोस्

व्यक्तिगत टूलटिपहरूको लागि डेटा विशेषताहरू

व्यक्तिगत टुलटिप्सका लागि विकल्पहरू वैकल्पिक रूपमा डेटा विशेषताहरूको प्रयोगद्वारा निर्दिष्ट गर्न सकिन्छ, माथि वर्णन गरिए अनुसार।

विधिहरू

एसिन्क्रोनस विधि र संक्रमण

सबै एपीआई विधिहरू एसिन्क्रोनस छन् र एक संक्रमण सुरु गर्नुहोस् । तिनीहरू संक्रमण सुरु हुने बित्तिकै तर यो समाप्त हुनु अघि कलरमा फर्कन्छन् । थप रूपमा, ट्रान्जिसनिङ कम्पोनेन्टमा विधि कललाई बेवास्ता गरिनेछ ।

थप जानकारीको लागि हाम्रो जाभास्क्रिप्ट कागजात हेर्नुहोस् ।

$().tooltip(options)

तत्व सङ्कलनमा टुलटिप ह्यान्डलर संलग्न गर्छ।

.tooltip('show')

तत्वको टुलटिप प्रकट गर्दछ। टूलटिप वास्तवमा देखाइनु अघि कलरमा फर्कन्छ (अर्थात shown.bs.tooltipघटना हुनु अघि)। यसलाई टुलटिपको "म्यानुअल" ट्रिगरिङ मानिन्छ। शून्य-लम्बाइ शीर्षकहरू भएका उपकरणटिपहरू कहिल्यै प्रदर्शित हुँदैनन्।

$('#element').tooltip('show')

.tooltip('hide')

तत्वको टुलटिप लुकाउँछ। टूलटिप वास्तवमा लुकाइनु अघि कलरमा फर्कन्छ (अर्थात hidden.bs.tooltipघटना हुनु अघि)। यसलाई टुलटिपको "म्यानुअल" ट्रिगरिङ मानिन्छ।

$('#element').tooltip('hide')

.tooltip('toggle')

तत्वको टुलटिप टगल गर्छ। टूलटिप वास्तवमा देखाइयो वा लुकेको हुनु अघि कलरमा फर्कन्छ (जस्तै shown.bs.tooltipवा hidden.bs.tooltipघटना हुनु अघि)। यसलाई टुलटिपको "म्यानुअल" ट्रिगरिङ मानिन्छ।

$('#element').tooltip('toggle')

.tooltip('dispose')

तत्वको टुलटिप लुकाउँछ र नष्ट गर्दछ। डेलिगेशन प्रयोग गर्ने टूलटिपहरू (जसलाई विकल्प प्रयोग गरेरselector सिर्जना गरिन्छ ) व्यक्तिगत रूपमा वंशज ट्रिगर तत्वहरूमा नष्ट गर्न सकिँदैन।

$('#element').tooltip('dispose')

.tooltip('enable')

तत्वको टुलटिपलाई देखाउन सक्ने क्षमता दिन्छ। उपकरणटिपहरू पूर्वनिर्धारित रूपमा सक्षम छन्।

$('#element').tooltip('enable')

.tooltip('disable')

देखाइने तत्वको टुलटिपको लागि क्षमता हटाउँछ। यदि टुलटिप पुन: सक्षम पारिएको छ भने मात्र देखाउन सक्षम हुनेछ।

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

तत्वको टुलटिप देखाउन वा लुकाउनको लागि क्षमता टगल गर्दछ।

$('#element').tooltip('toggleEnabled')

.tooltip('update')

तत्वको टुलटिपको स्थिति अपडेट गर्दछ।

$('#element').tooltip('update')

घटनाहरू

घटना प्रकार विवरण
show.bs.tooltip showउदाहरण विधि कल गर्दा यो घटना तुरुन्तै फायर हुन्छ ।
देखाइएको.bs.tooltip यो घटना तब हटाइन्छ जब टूलटिप प्रयोगकर्तालाई देख्न सकिन्छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।
hide.bs.tooltip यो घटना तुरुन्तै निकालिएको छ जब hideउदाहरण विधि कल गरिएको छ।
hidden.bs.tooltip यो घटना हटाइएको छ जब टुलटिप प्रयोगकर्ताबाट लुकाइएको समाप्त हुन्छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।
inserted.bs.tooltip यो घटना घटना पछि निकालिएको छ show.bs.tooltipजब टुलटिप टेम्प्लेट DOM मा थपिएको छ। 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})