टूलटिप्स

अवलोकन

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

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

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

उदाहरणहरू

टूलटिप्स सक्षम गर्नुहोस्

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

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

लिङ्कहरूमा टूलटिप्स

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

अनुकूलन उपकरण टिप्स

तपाईंले CSS चरहरू प्रयोग गरेर टूलटिपहरूको उपस्थिति अनुकूलन गर्न सक्नुहुन्छ । data-bs-custom-class="custom-tooltip"हामीले हाम्रो अनुकूलन उपस्थिति स्कोप गर्न र स्थानीय CSS भ्यारीएबललाई ओभरराइड गर्न प्रयोग गर्नको लागि अनुकूलन वर्ग सेट गर्छौं ।

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

दिशाहरू

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

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

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

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

SVG सँग:

CSS

चरहरू

Bootstrap को विकसित CSS चर दृष्टिकोण को एक भाग को रूप मा, टूलटिप्स अब .tooltipपरिष्कृत वास्तविक समय अनुकूलन को लागी स्थानीय CSS चर प्रयोग गर्दछ। CSS चरका लागि मानहरू Sass मार्फत सेट गरिएका छन्, त्यसैले Sass अनुकूलन अझै पनि समर्थित छ।

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Sass चरहरू

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

प्रयोग

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

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

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

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

मार्कअप

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

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

विकल्पहरू

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

बुटस्ट्र्याप ५.२.० को रूपमा, सबै कम्पोनेन्टहरूले प्रयोगात्मक आरक्षित डेटा विशेषतालाई समर्थन गर्दछ data-bs-configजसले JSON स्ट्रिङको रूपमा साधारण कम्पोनेन्ट कन्फिगरेसन राख्न सक्छ। जब एक तत्व हुन्छ data-bs-config='{"delay":0, "title":123}'र data-bs-title="456"विशेषताहरु, अन्तिम titleमान हुनेछ 456र अलग डाटा विशेषताहरु मा दिइएको मान ओभरराइड हुनेछ data-bs-config। थप रूपमा, अवस्थित डेटा विशेषताहरू JSON मानहरू जस्तै घर गर्न सक्षम छन् data-bs-delay='{"show":0,"hide":150}'।

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

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

विधिहरू

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

घटनाहरू

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()