टूलटिप्स

आढावा

टूलटिप प्लगइन वापरताना जाणून घ्यायच्या गोष्टी:

• टूलटिप स्थानासाठी तृतीय पक्ष लायब्ररी पॉपरवर अवलंबून असतात . तुम्ही आधी popper.min.js समाविष्ट करणे आवश्यक आहे किंवा Popper असलेले bootstrap.jsएक वापरा .bootstrap.bundle.min.js
• टूलटिप्स कार्यप्रदर्शन कारणांसाठी निवडल्या जातात, त्यामुळे तुम्ही त्या स्वतःच सुरू केल्या पाहिजेत .
• शून्य-लांबीच्या शीर्षकांसह टूलटिप्स कधीही प्रदर्शित केल्या जात नाहीत.
• 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>

दिशानिर्देश

चार टूलटिप दिशानिर्देश पाहण्यासाठी खालील बटणांवर फिरवा: वर, उजवीकडे, तळाशी आणि डावीकडे. आरटीएलमध्ये बूटस्ट्रॅप वापरताना दिशानिर्देश मिरर केले जातात.

<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

चल

बूटस्ट्रॅपच्या विकसित होत असलेल्या 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

वापर

टूलटिप प्लगइन मागणीनुसार सामग्री आणि मार्कअप तयार करते आणि डीफॉल्टनुसार त्यांच्या ट्रिगर घटकानंतर टूलटिप ठेवते.

JavaScript द्वारे टूलटिप ट्रिगर करा:

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>

पर्याय

data-bs-पर्याय डेटा विशेषता किंवा JavaScript द्वारे पास केले जाऊ शकतात म्हणून, तुम्ही मध्ये पर्याय नाव जोडू शकता data-bs-animation="{value}". डेटा विशेषतांद्वारे पर्याय पास करताना पर्याय नावाचा केस प्रकार “ camelCase ” वरून “ kebab-case ” मध्ये बदलण्याची खात्री करा. उदाहरणार्थ, data-bs-custom-class="beautifier"ऐवजी वापरा data-bs-customClass="beautifier".

बूटस्ट्रॅप 5.2.0 नुसार, सर्व घटक प्रायोगिक आरक्षित डेटा विशेषताचे समर्थन 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()