Tooltips

Overview

Zavatra tokony ho fantatra rehefa mampiasa ny plugin tooltip:

• Miantehitra amin'ny tranokalan'ny antoko fahatelo 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 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 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 etsy ambany raha te hahita fitaovana:

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" 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 ny 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 <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" 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. Ny toro-hevitra momba ny fitaovana misy lohateny tsy misy halavany dia tsy aseho mihitsy.

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 hetsika shown.bs.tooltipna hidden.bs.tooltip). 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 izay mampiasa ny delegasiona (izay noforonina amin'ny alalan'ny safidy selector) dia tsy azo ravana tsirairay amin'ny singa trigger.

tooltip.dispose()

Tadiavo

Manome fahaiza-manaon'ny singa iray mba haseho. 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()