Mga tooltip

Pangkalahatang-ideya

Mga bagay na dapat malaman kapag ginagamit ang tooltip plugin:

• Umaasa ang mga tooltip sa third party na library na Popper para sa pagpoposisyon. Dapat mong isama ang popper.min.js bago bootstrap.js, o gumamit ng isa bootstrap.bundle.min.jsna naglalaman ng Popper.
• Ang mga tooltip ay nag-opt-in para sa mga dahilan ng pagganap, kaya dapat mong simulan ang mga ito sa iyong sarili .
• Ang mga tooltip na may zero-length na mga pamagat ay hindi kailanman ipinapakita.
• Tukuyin container: 'body'upang maiwasan ang pag-render ng mga problema sa mas kumplikadong mga bahagi (tulad ng aming mga pangkat ng input, mga pangkat ng button, atbp).
• Ang pag-trigger ng mga tooltip sa mga nakatagong elemento ay hindi gagana.
• Ang mga tooltip para sa .disabledo mga disabledelemento ay dapat na ma-trigger sa isang elemento ng wrapper.
• Kapag na-trigger mula sa mga hyperlink na sumasaklaw sa maraming linya, ang mga tooltip ay igigitna. Gamitin white-space: nowrap;sa iyong <a>s upang maiwasan ang pag-uugaling ito.
• Dapat itago ang mga tooltip bago maalis ang mga kaukulang elemento nito sa DOM.
• Maaaring ma-trigger ang mga tooltip salamat sa isang elemento sa loob ng shadow DOM.

Nakuha ang lahat ng iyon? Mahusay, tingnan natin kung paano gumagana ang mga ito sa ilang mga halimbawa.

Mga halimbawa

Paganahin ang mga tooltip

Gaya ng nabanggit sa itaas, dapat mong simulan ang mga tooltip bago magamit ang mga ito. Ang isang paraan upang simulan ang lahat ng mga tooltip sa isang pahina ay ang piliin ang mga ito ayon sa kanilang data-bs-togglekatangian, tulad nito:

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

Mga tooltip sa mga link

Mag-hover sa mga link sa ibaba upang makita ang mga tooltip:

<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>

Mga custom na tooltip

Maaari mong i-customize ang hitsura ng mga tooltip gamit ang mga variable ng CSS . Nagtakda kami ng custom na klase data-bs-custom-class="custom-tooltip"upang saklawin ang aming custom na hitsura at gamitin ito upang i-override ang isang lokal na variable ng 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>

Mga direksyon

Mag-hover sa mga button sa ibaba upang makita ang apat na mga direksyon ng tooltip: itaas, kanan, ibaba, at kaliwa. Ang mga direksyon ay sinasalamin kapag gumagamit ng Bootstrap sa 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>

At may idinagdag na custom na 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>

Sa isang SVG:

CSS

Mga variable

Bilang bahagi ng umuusbong na mga variable ng CSS ng Bootstrap, ginagamit na ngayon ng mga tooltip ang mga lokal na variable ng CSS .tooltippara sa pinahusay na real-time na pag-customize. Ang mga halaga para sa mga variable ng CSS ay itinakda sa pamamagitan ng Sass, kaya sinusuportahan pa rin ang pag-customize ng 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 variable

$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

Paggamit

Ang tooltip plugin ay bumubuo ng content at markup on demand, at bilang default ay naglalagay ng mga tooltip pagkatapos ng kanilang trigger element.

I-trigger ang tooltip sa pamamagitan ng 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')
})

Markup

Ang kinakailangang markup para sa isang tooltip ay isang datakatangian lamang at titlesa HTML element na nais mong magkaroon ng isang tooltip. Ang nabuong markup ng isang tooltip ay medyo simple, bagama't nangangailangan ito ng isang posisyon (bilang default, nakatakda sa toppamamagitan ng plugin).

<!-- 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>

Mga elementong may kapansanan

Ang mga elementong may disabledkatangian ay hindi interactive, ibig sabihin, ang mga user ay hindi maaaring tumuon, mag-hover, o mag-click sa mga ito upang mag-trigger ng tooltip (o popover). Bilang isang solusyon, gugustuhin mong i-trigger ang tooltip mula sa isang wrapper <div>o <span>, perpektong ginawang keyboard-focusable gamit ang 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>

Mga pagpipilian

Dahil maaaring maipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript, maaari kang magdagdag ng pangalan ng opsyon sa data-bs-, tulad ng sa data-bs-animation="{value}". Siguraduhing baguhin ang uri ng case ng pangalan ng opsyon mula sa " camelCase " sa " kebab-case " kapag ipinapasa ang mga opsyon sa pamamagitan ng mga katangian ng data. Halimbawa, gamitin data-bs-custom-class="beautifier"sa halip na data-bs-customClass="beautifier".

Mula sa Bootstrap 5.2.0, sinusuportahan ng lahat ng mga bahagi ang isang pang- eksperimentong nakalaan na katangian ng data data-bs-configna maaaring maglagay ng simpleng configuration ng bahagi bilang isang string ng JSON. Kapag ang isang elemento ay may data-bs-config='{"delay":0, "title":123}'at data-bs-title="456"mga katangian, ang huling titlehalaga ay magiging 456at ang hiwalay na mga katangian ng data ay mag-o-override sa mga halagang ibinigay sa data-bs-config. Bilang karagdagan, ang mga kasalukuyang katangian ng data ay nakakapaglagay ng mga halaga ng JSON tulad ng data-bs-delay='{"show":0,"hide":150}'.

Paggamit ng function na maypopperConfig

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

Paraan

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

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

Mga kaganapan

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

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

tooltip.hide()