Source

टूलटिप्स

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

अवलोकन

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

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

यस कम्पोनेन्टको एनिमेसन प्रभाव prefers-reduced-motionमिडिया क्वेरीमा निर्भर हुन्छ। हाम्रो पहुँच कागजातको घटाइएको गति खण्ड हेर्नुहोस् ।

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

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

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

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

उदाहरणहरू

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

टाइट प्यान्ट अर्को स्तर केफियेह तपाईंले सायद तिनीहरूको बारेमा सुन्नु भएको छैन। फोटो बूथ दाढी कच्चा डेनिम लेटरप्रेस शाकाहारी मेसेन्जर ब्याग स्टम्पटाउन। फार्म-टू-टेबल सेटन, mcsweeney's fixie सस्टेनेबल क्विनोआ 8-बिट अमेरिकी परिधानमा टेरी रिचर्डसन विनाइल च्याम्ब्रे छ । बियर्ड स्टम्पटाउन, कार्डिगन्स बन मी लोमो थन्डरक्याट्स। टोफु बायोडिजेल विलियम्सबर्ग मार्फा, चार लोको म्याकस्वीनीको क्लिन्ज शाकाहारी च्याम्ब्रे। एक साँच्चै विडम्बनापूर्ण कारीगर जुनसुकै कीटार, सीनस्टर फार्म-टू-टेबल बैंक्सी अस्टिन ट्विटर ह्यान्डल फ्रीगन क्रेड कच्चा डेनिम सिंगल-ओरिजिन कफी भाइरल।

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

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

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

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

विधिहरू

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

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

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

$().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...
})