Source

Popisy

Dokumentácia a príklady na pridávanie vlastných tipov pre bootstrap s CSS a JavaScript pomocou CSS3 pre animácie a dátové atribúty pre lokálne ukladanie titulkov.

Prehľad

Čo by ste mali vedieť pri používaní doplnku tooltip:

  • Pri určovaní polohy sa popisy spoliehajú na knižnicu Popper.js tretej strany . Aby popisky fungovali, musíte pred bootstrap.js zahrnúť popper.min.js alebo použiť bootstrap.bundle.min.js/ bootstrap.bundle.jsktorý obsahuje Popper.js!
  • Ak vytvárate náš JavaScript zo zdroja, vyžadujeutil.js .
  • Popisy sú aktivované z dôvodov výkonu, takže ich musíte inicializovať sami .
  • Popisy s názvami s nulovou dĺžkou sa nikdy nezobrazujú.
  • Špecifikujte container: 'body', aby ste sa vyhli problémom s vykresľovaním v zložitejších komponentoch (ako sú naše vstupné skupiny, skupiny tlačidiel atď.).
  • Spúšťanie popisov na skrytých prvkoch nebude fungovať.
  • Popisy prvkov .disabledalebo disabledprvkov musia byť spustené na prvku obalu.
  • Pri spustení z hypertextových odkazov, ktoré presahujú viacero riadkov, budú popisy nástrojov vycentrované. Použite white-space: nowrap;na <a>s, aby ste sa vyhli tomuto správaniu.
  • Popisy nástrojov musia byť skryté pred odstránením príslušných prvkov z modelu DOM.

Máš to všetko? Skvelé, pozrime sa, ako fungujú s niekoľkými príkladmi.

Príklad: Povoľte popisy všade

Jedným zo spôsobov, ako inicializovať všetky popisy na stránke, je vybrať ich podľa ich data-toggleatribútu:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Príklady

Umiestnením kurzora myši na odkazy nižšie zobrazíte popisy:

Tesné nohavice ďalšej úrovne keffiyeh , o ktorých ste pravdepodobne ešte nepočuli. Photo booth brada raw denim kníhtlač vegan messenger bag stumptown. 8-bitové americké oblečenie z farmy na stôl seitan, mcsweeney's fixie udržateľná quinoa vinylovú chambray z froté richardson. Beard stumptown, cardigany banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, štyri loko mcsweeney's cleanse vegan chambray. Skutočne ironický remeselník bez ohľadu na klávesnicu, scénár z farmy na stôl Banky Austin twitter zvládnuť freegan cred raw denim single-origin coffee viral.

Umiestnením kurzora myši na tlačidlá nižšie zobrazíte štyri smery popisov: hore, vpravo, dole a vľavo.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

A s pridaným vlastným HTML:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Použitie

Doplnok tooltip generuje obsah a značky na požiadanie a v predvolenom nastavení umiestňuje popisky za ich spúšťací prvok.

Spustite popis pomocou JavaScriptu:

$('#example').tooltip(options)

Označenie

Požadované označenie pre popis je iba dataatribút a titlena elemente HTML chcete mať popis. Vygenerované označenie popisku je pomerne jednoduché, hoci vyžaduje pozíciu (v predvolenom nastavení topju doplnok nastaví na hodnotu).

Zabezpečte, aby popisy fungovali pre používateľov klávesnice a asistenčných technológií

Popisy nástrojov by ste mali pridávať len k prvkom HTML, ktoré sú tradične zamerané na klávesnicu a sú interaktívne (napríklad odkazy alebo ovládacie prvky formulárov). Hoci ľubovoľné prvky HTML (napríklad <span>s) môžu byť zaostriteľné pridaním tabindex="0"atribútu, používateľom klávesnice to pridajú potenciálne nepríjemné a mätúce zarážky tabulátora na neinteraktívnych prvkoch. Navyše väčšina asistenčných technológií v súčasnosti v tejto situácii neoznamuje popis.

Okrem toho sa nespoliehajte iba na hoverspúšťač pre váš popis, pretože to znemožní spustenie vašich popisov pre používateľov klávesnice.

<!-- HTML to write -->
<a href="#" data-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="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Zakázané prvky

Prvky s disabledatribútom nie sú interaktívne, čo znamená, že používatelia na ne nemôžu zaostriť, umiestniť kurzor myši alebo kliknúť na ne, aby vyvolali popis (alebo kontextové okno). Ako riešenie budete chcieť spustiť popis z obálky <div>alebo <span>, ideálne tak, aby bolo možné zamerať sa na klávesnicu pomocou tabindex="0", a prepísať pointer-eventsprvok na zakázanom prvku.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-animation="".

názov Typ Predvolené Popis
animácie boolovská hodnota pravda Na popis použite prechod zoslabovania CSS
kontajner reťazec | prvok | falošný falošný

Pridá popis ku konkrétnemu prvku. Príklad: container: 'body'. Táto možnosť je užitočná najmä v tom, že vám umožňuje umiestniť popis v toku dokumentu v blízkosti spúšťacieho prvku – čo zabráni tomu, aby sa popisok vznášal preč od spúšťacieho prvku počas zmeny veľkosti okna.

meškanie číslo | objekt 0

Oneskorenie zobrazenia a skrytia tooltipu (ms) – netýka sa manuálneho typu spúšťania

Ak je zadané číslo, oneskorenie sa použije na skrytie/zobrazenie

Štruktúra objektu je:delay: { "show": 500, "hide": 100 }

html boolovská hodnota falošný

Povoliť HTML v popise.

Ak je pravda, značky HTML v popise titlesa vykreslia v popise. Ak je hodnota false, textna vloženie obsahu do DOM sa použije metóda jQuery.

Ak sa obávate útokov XSS, použite text.

umiestnenie reťazec | funkciu 'top'

Ako umiestniť popis – auto | hore | dole | vľavo | správny.
Keď autoje zadaný, dynamicky zmení orientáciu popisku.

Keď sa na určenie umiestnenia použije funkcia, volá sa s popisom uzla DOM ako jej prvým argumentom a spúšťacím prvkom uzlom DOM ako jej druhým. Kontext thisje nastavený na inštanciu popisu.

selektor reťazec | falošný falošný Ak je k dispozícii selektor, objekty popisov budú delegované na zadané ciele. V praxi sa to používa na umožnenie pridávania vyskakovacích okien do dynamického obsahu HTML. Pozrite si tento a informatívny príklad .
šablóna reťazec '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Základný kód HTML, ktorý sa má použiť pri vytváraní popisu.

Popis titlebude vložený do súboru .tooltip-inner.

.arrowsa zmení na šípku popisu.

Prvok vonkajšieho obalu by mal mať .tooltiptriedu a role="tooltip".

titul reťazec | prvok | funkciu ''

Predvolená hodnota názvu, ak titleatribút nie je prítomný.

Ak je zadaná funkcia, zavolá sa so svojou thisreferenčnou sadou na prvok, ku ktorému je pripojený popis.

spúšťač reťazec 'ukazovať kurzor'

Ako sa spúšťa popis – kliknite | vznášať sa | zameranie | Manuálny. Môžete prejsť viacerými spúšťačmi; oddeľte ich medzerou.

'manual'označuje, že popis bude spustený programovo prostredníctvom .tooltip('show')metód .tooltip('hide')a .tooltip('toggle'); túto hodnotu nemožno kombinovať so žiadnym iným spúšťačom.

'hover'sám osebe bude mať za následok popisy nástrojov, ktoré sa nedajú spustiť pomocou klávesnice a mali by sa používať iba vtedy, ak existujú alternatívne spôsoby prenosu rovnakých informácií pre používateľov klávesnice.

offset číslo | reťazec 0 Odsadenie popisku vzhľadom na jeho cieľ. Ďalšie informácie nájdete v dokumentoch offsetu Popper.js .
záložné umiestnenie reťazec | pole 'flip' Povoľte určiť, ktorú pozíciu Popper použije pri núdzovom nastavení. Ďalšie informácie nájdete v dokumentoch o správaní Popper.js
hranica reťazec | prvok 'scrollParent' Hranica obmedzenia pretečenia popisku. Prijíma hodnoty 'viewport', 'window', 'scrollParent'alebo odkaz HTMLElement (iba JavaScript). Ďalšie informácie nájdete v dokumentoch preventOverflow Popper.js .

Atribúty údajov pre jednotlivé popisy

Možnosti pre jednotlivé popisy nástrojov možno alternatívne špecifikovať pomocou atribútov údajov, ako je vysvetlené vyššie.

Metódy

Asynchrónne metódy a prechody

Všetky metódy API sú asynchrónne a spúšťajú prechod . Vrátia sa k volajúcemu hneď po spustení prechodu, ale skôr, ako sa skončí . Okrem toho bude volanie metódy na prechodovom komponente ignorované .

Viac informácií nájdete v našej dokumentácii JavaScript.

$().tooltip(options)

Ku kolekcii prvkov pripojí popisovač.

.tooltip('show')

Zobrazí popis prvku. Vráti sa k volajúcemu skôr, ako sa skutočne zobrazil popis (tj predtým, ako shown.bs.tooltipdôjde k udalosti). Toto sa považuje za „manuálne“ spustenie popisku. Popisy s názvami s nulovou dĺžkou sa nikdy nezobrazujú.

$('#element').tooltip('show')

.tooltip('hide')

Skryje popis prvku. Vráti sa k volajúcemu skôr, ako bol popis skutočne skrytý (tj pred výskytom hidden.bs.tooltipudalosti). Toto sa považuje za „manuálne“ spustenie popisku.

$('#element').tooltip('hide')

.tooltip('toggle')

Prepína popis prvku. Vráti sa k volajúcemu skôr, ako sa popis skutočne zobrazí alebo skryje (tj predtým, ako nastane udalosť shown.bs.tooltipalebo ). hidden.bs.tooltipToto sa považuje za „manuálne“ spustenie popisku.

$('#element').tooltip('toggle')

.tooltip('dispose')

Skryje a zničí popis prvku. Popisy, ktoré používajú delegovanie (ktoré sú vytvorené pomocou voľby ) selector, nemožno jednotlivo zničiť na podradených spúšťacích prvkoch.

$('#element').tooltip('dispose')

.tooltip('enable')

Umožňuje zobraziť popis prvku. Popisy nástrojov sú predvolene povolené.

$('#element').tooltip('enable')

.tooltip('disable')

Odstráni možnosť zobrazenia popisu prvku. Popis bude možné zobraziť iba vtedy, ak bude znova povolený.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

Prepína možnosť zobrazenia alebo skrytia popisku prvku.

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Aktualizuje polohu popisku prvku.

$('#element').tooltip('update')

Diania

Typ udalosti Popis
zobraziť.bs.popis Táto udalosť sa spustí okamžite po showzavolaní metódy inštancie.
zobrazený.bs.tip Táto udalosť sa spustí, keď sa popis zobrazí používateľovi (bude čakať na dokončenie prechodov CSS).
hide.bs.tooltip Táto udalosť sa spustí okamžite po hidezavolaní metódy inštancie.
skrytý.bs.tip Táto udalosť sa spustí, keď skončí skrytie popisu pred používateľom (bude čakať na dokončenie prechodov CSS).
vložený.bs.tip Táto udalosť sa spustí po show.bs.tooltipudalosti, keď bola šablóna popisu pridaná do modelu DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})