Rīku padomi

Pārskats

Lietas, kas jāzina, izmantojot rīka padomu spraudni:

• Rīka padomi pozicionēšanai balstās uz trešās puses bibliotēku Popper . Lai rīka padomi darbotos, pirms bootstrap.js jāiekļauj popper.min.js vai jāizmanto bootstrap.bundle.min.js/ bootstrap.bundle.jskas satur Popper!
• Rīka padomi tiek izvēlēti veiktspējas iemeslu dēļ, tāpēc jums tie ir jāinicializē pašam .
• Rīka padomi ar nulles garuma virsrakstiem nekad netiek rādīti.
• Norādiet container: 'body', lai izvairītos no renderēšanas problēmām sarežģītākos komponentos (piemēram, mūsu ievades grupās, pogu grupās utt.).
• Rīka padomu aktivizēšana slēptajos elementos nedarbosies.
• Rīka padomi .disabledvai disabledelementi ir jāaktivizē iesaiņojuma elementā.
• Ja to aktivizē hipersaites, kas aptver vairākas rindiņas, rīka padomi tiks centrēti. Izmantojiet white-space: nowrap;, <a>lai izvairītos no šādas uzvedības.
• Rīka padomi ir jāpaslēpj, pirms tiem atbilstošie elementi tiek noņemti no DOM.
• Rīka padomus var aktivizēt, pateicoties elementam ēnu DOM iekšpusē.

Vai to visu sapratāt? Lieliski, redzēsim, kā viņi strādā ar dažiem piemēriem.

Piemērs: iespējojiet rīka padomus visur

Viens veids, kā inicializēt visus rīka padomus lapā, būtu atlasīt tos pēc to data-bs-toggleatribūta:

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

Piemēri

Virziet kursoru virs tālāk esošajām saitēm, lai skatītu rīka padomus:

Novietojiet kursoru virs tālāk esošajām pogām, lai skatītu četrus rīka padomu norādes: augšā, pa labi, apakšā un pa kreisi. Norādes tiek atspoguļotas, izmantojot Bootstrap 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>

Un ar pievienotu pielāgotu HTML:

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

Ar SVG:

Sass

Mainīgie lielumi

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

Lietošana

Rīkpadomu spraudnis ģenerē saturu un marķējumu pēc pieprasījuma un pēc noklusējuma ievieto rīka padomus aiz to aktivizētāja elementa.

Aktivizējiet rīka padomu, izmantojot JavaScript:

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

Atzīmes

Rīka padomam nepieciešamais marķējums ir tikai dataatribūts title, un HTML elementā, kuram vēlaties izveidot rīka padomu. Rīka padoma ģenerētais marķējums ir diezgan vienkāršs, lai gan tam ir nepieciešama pozīcija (pēc noklusējuma to iestatījis topspraudnis).

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

Atspējotie elementi

Elementi ar disabledatribūtu nav interaktīvi, tas nozīmē, ka lietotāji nevar fokusēt, virzīt kursoru vai noklikšķināt uz tiem, lai aktivizētu rīka padomu (vai uznirstošo logu). Kā risinājums ir jāiedarbina rīka padoms no iesaiņojuma <div>vai <span>ideālā gadījumā tastatūras fokusēšanas, izmantojot 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>

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-bs-, tāpat kā data-bs-animation="". Nododot opcijas, izmantojot datu atribūtus, noteikti nomainiet opcijas nosaukuma reģistra veidu no camelCase uz kebab-case. Piemēram, tā vietā, lai izmantotu data-bs-customClass="beautifier", izmantojiet data-bs-custom-class="beautifier".

Izmantojot funkciju arpopperConfig

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

Metodes

parādīt

Parāda elementa rīka padomu. Atgriežas pie zvanītāja, pirms rīka padoms ir faktiski parādīts (ti, pirms shown.bs.tooltipnotikuma). To uzskata par rīka padoma “manuālu” aktivizēšanu. Rīka padomi ar nulles garuma virsrakstiem nekad netiek rādīti.

tooltip.show()

paslēpties

Paslēpj elementa rīka padomu. Atgriežas pie zvanītāja, pirms rīka padoms faktiski ir paslēpts (ti, pirms hidden.bs.tooltipnotikuma). To uzskata par rīka padoma “manuālu” aktivizēšanu.

tooltip.hide()

pārslēgt

Pārslēdz elementa rīka padomu. Atgriežas pie zvanītāja, pirms rīka padoms ir faktiski parādīts vai paslēpts (ti, pirms shown.bs.tooltipvai hidden.bs.tooltipnotikuma). To uzskata par rīka padoma “manuālu” aktivizēšanu.

tooltip.toggle()

atbrīvoties

Paslēpj un iznīcina elementa rīka padomu (noņem DOM elementā saglabātos datus). Rīka padomus, kuros tiek izmantota deleģēšana (kas tiek izveidoti, izmantojot opciju selector) , nevar atsevišķi iznīcināt pēcnācēju aktivizētāja elementiem.

tooltip.dispose()

iespējot

Nodrošina elementa rīka padomam iespēju tikt parādītam. Rīka padomi ir iespējoti pēc noklusējuma.

tooltip.enable()

atspējot

Noņem iespēju rādīt elementa rīka padomu. Rīka padomu varēs parādīt tikai tad, ja tas būs atkārtoti iespējots.

tooltip.disable()

pārslēgtIespējots

Pārslēdz iespēju rādīt vai paslēpt elementa rīka padomu.

tooltip.toggleEnabled()

Atjaunināt

Atjaunina elementa rīka padoma pozīciju.

tooltip.update()

getInstance

Statiskā metode, kas ļauj iegūt rīka padoma gadījumu, kas saistīts ar DOM elementu

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

getOrCreateInstance

Statiskā metode, kas ļauj iegūt rīka padoma gadījumu, kas saistīts ar DOM elementu, vai izveidot jaunu, ja tas nav inicializēts

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

Pasākumi

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

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

tooltip.hide()