ટૂલટિપ્સ

ઝાંખી

ટૂલટિપ પ્લગઇનનો ઉપયોગ કરતી વખતે જાણવા જેવી બાબતો:

• ટૂલટિપ્સ પોઝિશનિંગ માટે થર્ડ પાર્ટી લાઇબ્રેરી પોપર પર આધાર રાખે છે. તમારે પહેલાં popper.min.js શામેલ કરવું આવશ્યક છે 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>

દિશાઓ

ચાર ટૂલટિપ્સ દિશાઓ જોવા માટે નીચેના બટનો પર હોવર કરો: ઉપર, જમણે, નીચે અને ડાબે. 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

ચલો

બુટસ્ટ્રેપના વિકસતા 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()