Tooltips

Overview

Zavatra tokony ho fantatra rehefa mampiasa ny plugin tooltip:

• Miantehitra amin'ny famakiam-bokin'ny antoko faha-3 Popper ny toro-hevitra momba ny fametrahana toerana. Tsy maintsy ampidirinao ny popper.min.js alohan'ny bootstrap.js na ampiasao bootstrap.bundle.min.js/ bootstrap.bundle.jsizay misy Popper mba hahafahan'ny toro-hevitra miasa!
• 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 mandeha ny fanosehana toro-hevitra amin'ny singa miafina.
• Ny toro-làlana ho an'ny singa .disabledna ny disabledsinga dia tsy maintsy avoaka amin'ny singa fonosina.
• 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-làlana amin'ny toerana rehetra

Ny fomba iray hanombohana ny toro-hevitra rehetra amin'ny pejy iray dia ny fisafidianana azy ireo amin'ny data-bs-toggletoetrany:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

OHATRA

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

Atsipazo 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" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" 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" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Miaraka amin'ny SVG:

Sass

hiovaova

$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:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

Fampiasana

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

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

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  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" 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 ianao <div>na <span>, natao tsara indrindra ho an'ny fitendry hifantoka amin'ny fampiasana tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-bs-, toy ny ao amin'ny data-bs-animation="". Ataovy azo antoka ny manova 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, fa tsy mampiasa data-bs-customClass="beautifier", ampiasao data-bs-custom-class="beautifier".

Fampiasana asa miaraka amin'nypopperConfig

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

fomba

FAMPISEHOANA

Maneho ny tondro-fitaovan'ny singa iray. Miverina any amin'ny mpiantso alohan'ny nanehoana ny tondro-fitaovana (izany hoe alohan'ny shown.bs.tooltipnitrangan'ny hetsika). Ity dia raisina ho toy ny "manual" triggering ny tooltip. Tsy aseho mihitsy ny toro-lalana misy lohateny tsy misy halavany.

tooltip.show()

afeno ny

Manafina ny tondro-fitaovan'ny singa iray. Miverina any amin'ny mpiantso alohan'ny nafenina ny tondro fitaovana (izany hoe alohan'ny hidden.bs.tooltipnitrangan'ny hetsika). Ity dia raisina ho toy ny "manual" triggering ny tooltip.

tooltip.hide()

mifamadika

Manova ny tondro-fitaovan'ny singa iray. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny tondro-fitaovana (izany hoe talohan'ny nitrangan'ny shown.bs.tooltipna hidden.bs.tooltiphetsika). Ity dia raisina ho toy ny "manual" triggering ny tooltip.

tooltip.toggle()

Ario

Manafina sy manapotika ny tondro-pitaovan'ny singa iray (Esory ny angona voatahiry ao amin'ny singa DOM). Ireo toro-lalana mampiasa delegasiona (izay noforonina amin'ny alalan'ny safidy selector) dia tsy azo rava tsirairay amin'ny singa trigger.

tooltip.dispose()

Tadiavo

Manome fahafahana aseho amin'ny tendron'ny fitaovana iray. Ny toro-làlana dia alefa amin'ny alàlan'ny default.

tooltip.enable()

disable

Esory ny fahafahana aseho amin'ny fanondro fitaovana iray. Ny tondro-fitaovana dia tsy ho hita afa-tsy raha averina alefa.

tooltip.disable()

toggleEnabled

Manova ny fahafahana aseho na afenina ny tohin'ny fitaovana iray.

tooltip.toggleEnabled()

vaovao farany

Manavao ny toeran'ny tondro-fitaovana iray.

tooltip.update()

getInstance

Fomba static izay ahafahanao mahazo ny ohatra amin'ny tooltip mifandray amin'ny singa DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

Fomba static izay ahafahanao mahazo ny ohatra amin'ny tooltip mifandray amin'ny singa DOM, na mamorona vaovao raha toa ka tsy natomboka izany

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

zava-mitranga

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()