Tooltips

Overview

Zavatra tokony ho fantatra rehefa mampiasa ny plugin tooltip:

• Miantehitra amin'ny tranokalan'ny antoko fahatelo Popper ny toro-lalana ho an'ny fametrahana toerana. Tsy maintsy mampiditra popper.min.js aloha bootstrap.jsianao, na mampiasa iray bootstrap.bundle.min.jsmisy Popper.
• Ny toro-làlana dia mirotsaka noho ny antony fampisehoana, ka tsy maintsy ataonao voalohany izy ireo .
• Tsy aseho mihitsy ny toro-lalana misy lohateny tsy misy halavany.
• Mariho container: 'body'mba tsy hisian'ny olana amin'ny singa sarotra kokoa (toy ny vondrona fampidirana, vondrona bokotra, sns).
• Tsy hahomby ny fametahana toro-hevitra amin'ny singa miafina.
• Ny toro-làlana ho an'ny singa .disabledna ny disabledsinga dia tsy maintsy alefa amin'ny singa wrapper.
• Rehefa voakitika avy amin'ny rohibe mivelatra andalana maromaro, dia ho afovoany ny toro-hevitra. Ampiasao white-space: nowrap;amin'ny <a>s anao mba hialana amin'izany fihetsika izany.
• Tsy maintsy afenina ny toro-làlana alohan'ny hanesorana ireo singa mifandraika aminy ao amin'ny DOM.
• Ny toro-làlana dia azo atomboka noho ny singa iray ao anaty aloka DOM.

Nahazo izany rehetra izany? Tsara, andao hojerentsika ny fomba fiasan'izy ireo miaraka amin'ny ohatra vitsivitsy.

OHATRA

Alefaso ny toro-hevitra

Araka ny voalaza tetsy ambony dia tsy maintsy atombokao ny toro-hevitra alohan'ny hampiasana azy ireo. Ny fomba iray hanombohana ny toro-hevitra rehetra amin'ny pejy iray dia ny fisafidianana azy ireo amin'ny data-bs-toggletoetrany, toy izao:

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

Torohevitra momba ny rohy

Mitsangàna eo amin'ny rohy etsy ambany raha te hahita fitaovana:

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

Soso-kevitra manokana

Azonao atao ny mampifanaraka ny endrik'ireo toro-hevitra amin'ny fampiasana ny fari-piadidiana CSS . Nametraka kilasy mahazatra data-bs-custom-class="custom-tooltip"izahay mba hamenoana ny endrikay manokana ary ampiasainay hanilika ny fari-piadidiana CSS eo an-toerana.

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

Toro-lalana

Apetaho eo amin'ny bokotra etsy ambany hahitanao ireo toro-lalana efatra: ambony, havanana, ambany ary ankavia. Hita taratra ny lalana rehefa mampiasa Bootstrap amin'ny 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>

Ary nampiana HTML mahazatra:

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

Miaraka amin'ny SVG:

CSS

hiovaova

Ao anatin'ny fomba fiovaovan'ny CSS mivoatra an'ny Bootstrap, ny toro-hevitra amin'izao fotoana izao dia mampiasa ny fari-piainan'ny CSS eo an .tooltip-toerana ho an'ny fanamboarana amin'ny fotoana tena izy. Ny soatoavina ho an'ny fari-piainan'ny CSS dia apetraka amin'ny alàlan'ny Sass, noho izany dia mbola tohanana ihany koa ny fanamboarana 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 variables

$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

Fampiasana

Ny plugin tooltip dia mamorona votoaty sy marika amin'ny fangatahana, ary amin'ny alàlan'ny default dia mametraka ny toro-hevitra aorian'ny singa trigger.

Alefaso amin'ny alalan'ny JavaScript ny toro-hevitra:

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')
})

fanamarihana

Ny mari-pamantarana ilaina ho an'ny tondro-fitaovana dia datatoetra iray ihany ary titleamin'ny singa HTML tianao hananana tondro-fitaovana. Ny mari-pamantarana vokarina amin'ny tondro-fitaovana dia tsotra, na dia mitaky toerana aza izany (amin'ny alàlan'ny default, napetraky topny 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>

singa kilemaina

Ny singa manana ny disabledtoetra dia tsy mifampiresaka, midika izany fa ny mpampiasa dia tsy afaka hifantoka, hivezivezy, na hanindry azy ireo hanetsika fitaovana (na popover). Amin'ny maha-famoahana azy dia te -hamosika ny tondro-fitaovana avy amin'ny fonony <div>na , izay natao indrindra hifantoka amin'ny klavier ianao amin'ny fampiasana .<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>

FANDIKANA

Satria azo ampitaina amin'ny alàlan'ny toetran'ny data na JavaScript ny safidy, azonao atao ny manisy anarana safidy amin'ny data-bs-, toy ny ao amin'ny data-bs-animation="{value}". Ataovy azo antoka fa hanova ny karazana tranga amin'ny anarana safidy avy amin'ny " CamelCase " ho " kebab-case " rehefa mandalo ny safidy amin'ny alàlan'ny toetran'ny data. Ohatra, ampiasao data-bs-custom-class="beautifier"fa tsy data-bs-customClass="beautifier".

Amin'ny Bootstrap 5.2.0, ny singa rehetra dia manohana toetra angon-drakitra natokana ho an'ny fanandramanadata-bs-config izay afaka mametraka ny fandrindrana singa tsotra ho tady JSON. Rehefa manana data-bs-config='{"delay":0, "title":123}'sy data-bs-title="456"toetra ny singa iray, dia ny titlesanda farany 456ary ny toetran'ny angon-drakitra misaraka dia hanongotra ny sanda omena amin'ny data-bs-config. Ankoatr'izay, ny toetran'ny data efa misy dia afaka mametraka ny sanda JSON toy ny data-bs-delay='{"show":0,"hide":150}'.

Fampiasana asa miaraka amin'nypopperConfig

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

fomba

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

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

zava-mitranga

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

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

tooltip.hide()