टूलटिप्स

अवलोकन

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

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

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

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

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

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

उदाहरणहरू

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

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

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

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

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

SVG सँग:

सास

चरहरू

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

प्रयोग

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

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

मार्कअप

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

<!-- HTML to write -->
<a href="#" data-bs-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="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

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

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

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-bs-, जस्तै मा data-bs-animation=""। डेटा विशेषताहरू मार्फत विकल्पहरू पास गर्दा CamelCase बाट kebab-case मा विकल्प नामको केस प्रकार परिवर्तन गर्न निश्चित गर्नुहोस्। उदाहरणका लागि, प्रयोग गर्नुको सट्टा data-bs-customClass="beautifier", प्रयोग गर्नुहोस् data-bs-custom-class="beautifier"।

संग प्रकार्य प्रयोग गर्दैpopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

विधिहरू

देखाउनु

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

tooltip.show()

लुकाउनुहोस्

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

tooltip.hide()

टगल गर्नुहोस्

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

tooltip.toggle()

डिस्पोज

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

tooltip.dispose()

सक्षम गर्नुहोस्

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

tooltip.enable()

असक्षम पार्नुहोस्

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

tooltip.disable()

टगल सक्षम गरियो

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

tooltip.toggleEnabled()

अपडेट गर्नुहोस्

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

tooltip.update()

उदाहरण प्राप्त गर्नुहोस्

स्थिर विधि जसले तपाईंलाई DOM तत्वसँग सम्बन्धित टूलटिप उदाहरण प्राप्त गर्न अनुमति दिन्छ

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

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

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

घटनाहरू

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()