Dagiti tip ti remienta
Dokumentasion ken dagiti pagarigan para iti pananginayon kadagiti kostumbre a Bootstrap tooltips babaen ti CSS ken JavaScript babaen ti panagusar ti CSS3 para kadagiti animasion ken dagiti data-attribute para iti lokal a pagipempenan ti paulo.
Panangkita iti pakabuklan
Dagiti banag nga ammuen no agusar ti tooltip plugin:
- Dagiti totip ti ramit ket agpannurayda iti maika-3 a partido a biblioteka a Popper.js para iti panagposision. Masapul nga iramanmo ti popper.min.js sakbay ti bootstrap.js wenno usarem ti
bootstrap.bundle.min.js
/bootstrap.bundle.js
a naglaon iti Popper.js tapno agtrabaho dagiti tooltip! - No mangbangbangonka iti JavaScript-mi manipud iti gubuayan, kasapulanna ti
util.js
. - Dagiti Tooltip ket opt-in para kadagiti rason ti panagaramid, isu a masapul nga irugim a mismo dagitoy .
- Dagiti Tooltip nga addaan kadagiti zero-length a paulo ket saan a pulos a maiparang.
- Ibaga
container: 'body'
tapno maliklikan dagiti parikut ti panagiparang kadagiti ad-adu a komplikado a paset (kas dagiti grupo ti panagserrektayo, dagiti grupo ti buton, kdpy). - Saan nga agtrabaho ti panangtignay kadagiti tooltip kadagiti nailemmeng nga elemento.
- Dagiti tip ti ramit para iti
.disabled
wennodisabled
dagiti elemento ket masapul a mai-trigger iti maysa nga elemento ti balkot. - No mai-trigger manipud kadagiti hyperlink a mangsaklaw kadagiti adu a linia, dagiti tooltip ket maisentro. Usaren
white-space: nowrap;
ti<a>
s-mo tapno maliklikan daytoy a kababalin. - Dagiti tip ti ramit ket masapul a mailemmeng sakbay a dagiti maitunos nga elementoda ket naikkat manipud iti DOM.
- Dagiti Tooltip ket mabalin a mai-trigger gapu ti maysa nga elemento iti uneg ti anniniwan a DOM.
Ti epekto ti animasion daytoy a paset ket agpannuray iti prefers-reduced-motion
panagsaludsod ti media. Kitaen ti benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .
Naalamon amin dagita? Nasayaat, kitaentayo no kasano ti panagtrabahoda babaen ti sumagmamano a pagarigan.
Pagarigan: Pagbalinen dagiti tooltip iti sadinoman
Ti maysa a wagas a mangirugi kadagiti amin a toltip iti maysa a panid ket ti panangpili kadagitoy babaen ti data-toggle
attribute-da:
Dagiti pagarigan
I-hover dagiti link iti baba tapno makita dagiti toltips:
Tight pants next level keffiyeh dimo la ketdi nangngeg. Photo booth barbas hilaw nga denim nga letterpress vegan nga mensahero nga bag stumptown. Talon-agingga-lamisaan seitan, mcsweeney's fixie sustainable quinoa 8-bit american a kawes addaan iti terry richardson vinyl chambray. Barbas stumptown, cardigans banh mi lomo dagiti gurruod a pusa. Tofu biodiesel williamsburg marfa, uppat a loko mcsweeney ti dalusan ti vegan a chambray. A talaga nga ironic nga artisano aniaman ti keytar , scenester talon-agingga-iti-lamisaan banksy Austin twitter handle freegan cred hilaw denim maymaysa-origin a kape viral.
I-hover dagiti buton iti baba tapno makitam ti uppat a direksion ti toltips: ngato, kannawan, baba, ken kannigid.
Ket babaen ti nainayon a kostumbre nga HTML:
Panagusar
Ti plugin ti tooltip ket mangpataud ti linaon ken panagmarka no kasapulan, ken babaen ti kasisigud ket mangikabil kadagiti tooltip kalpasan ti elementoda a mangtignay.
I-trigger ti tooltip babaen ti JavaScript:
Overflow auto
kenscroll
Ti posision ti Tooltip ket padasenna ti automatiko a panagbalbaliw no ti maysa a nagannak a pagkargaan ket addaan overflow: auto
wenno overflow: scroll
kas ti .table-responsive
, ngem pagtalinaedenna pay laeng ti posision ti orihinal a pannakaikabil. Tapno marisut, ikeddeng ti boundary
pagpilian iti ania man malaksid ti default a pateg, 'scrollParent'
, a kas ti 'window'
:
Panagmarka
Ti kasapulan a marka para iti tooltip ket maysa laeng nga data
attribute ken title
iti elemento ti HTML kayatmo nga addaan iti tooltip. Ti napataud a marka ti maysa a tooltip ket imbes a simple, urayno daytoy ket agkasapulan ti posision (babaen ti kasisigud, naikeddeng iti top
babaen ti plugin).
Ti panangaramid kadagiti tooltip nga agtrabaho para kadagiti agus-usar iti teklado ken katulongan a teknolohia
Rumbeng laeng nga inayonmo dagiti tooltip kadagiti elemento ti HTML a tradisional a maipamaysa iti teklado ken interaktibo (kas dagiti silpo wenno dagiti kontrol ti porma). Urayno dagiti arbitrario nga elemento ti HTML (kas ti <span>
s) ket mabalin a maaramid a maipamaysa babaen ti pananginayon ti tabindex="0"
attribute, daytoy ket manginayon kadagiti mabalin a makarimon ken makariro a panagsardeng ti tab kadagiti saan nga interaktibo nga elemento para kadagiti agar-aramat ti teklado, ken kaaduan kadagiti makatulong a teknolohia ket agdama a dida ipakaammo ti tooltip iti daytoy a kasasaad. Mainayon pay, dika agpannuray laeng a hover
kas ti mangtignay para iti tooltipmo, ta daytoy ket mangaramid kadagiti tooltipmo nga imposible a mangtignay para kadagiti agar-aramat ti teklado.
Dagiti baldado nga elemento
Dagiti elemento nga addaan iti disabled
attribute ket saan nga interaktibo, kayatna a sawen a dagiti agar-aramat ket dida mabalin ti agpokus, ag-hover, wenno ag-klik kadagitoy tapno mangtignay ti tooltip (wenno popover). Kas maysa a panagliklik, kayatmo a mangtignay ti tooltip manipud iti maysa a balkot <div>
wenno <span>
, nasayaat a naaramid a teklado-a-maipamaysa babaen ti panagusar ti tabindex="0"
, ken i-override ti pointer-events
iti nabaldado nga elemento.
Dagiti Pagpilian
Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-
, a kas iti data-animation=""
.
Imutektekanyo a gapu kadagiti rason ti seguridad ti sanitize
, sanitizeFn
ken whiteList
dagiti pagpilian ket saan a maited babaen ti panagusar kadagiti kababalin ti datos.
Nagan | Tipo | Default | Panangiladawan |
---|---|---|---|
animasion nga | boolean nga | agpayso | Iyaplikar ti panagbalbaliw ti panagkupas ti CSS iti tooltip |
pagkargaan | kuerdas nga | elemento nga | saan nga agpayso | saan nga agpayso | Inayon ti tooltip iti espesipiko nga elemento. Kas pagarigan: |
itantan | numero | banag | 0 nga | Ti pannakataktak ti panangipakita ken panangilemmeng ti tooltip (ms) - saan nga agaplikar iti manual a kita ti trigger No naited ti numero, maipakat ti delay agpadpada iti hide/show Ti estruktura ti banag ket: |
html nga | boolean nga | saan nga agpayso | Palubosan ti HTML iti tooltip. No pudno, dagiti etiketa ti HTML iti tooltip's Usaren ti teksto no madanaganka kadagiti panangraut ti XSS. |
pannakaikabil | kuerdas nga | amad | 'ngato' | Kasano ti mangiposision ti tooltip - auto | ngato | baba | kanigid | kusto. No ti maysa a panagandar ket maus-usar a mangikeddeng ti pannakaikabil, daytoy ket maawagan nga addaan ti tooltip a DOM a nodo a kas ti umuna nga argumentona ken ti mangtignay nga elemento a DOM a nodo a kas ti maikadua. Ti |
agpili nga | kuerdas nga | saan nga agpayso | saan nga agpayso | No ti maysa a mangpili ket naited, dagiti banag ti tooltip ket maitedto kadagiti naikeddeng a puntiria. Iti praktis, daytoy ket maus-usar a mangyaplikar pay kadagiti tooltip kadagiti dinamiko a nainayon nga elemento ti DOM ( jQuery.on suporta). Kitaen daytoy ken ti makaisuro a pagarigan . |
plantilia nga | kuerdas | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Base ti HTML nga usaren no mangpartuat ti tooltip. Ti tooltip's
Ti akinruar unay nga elemento ti balkot ket rumbeng nga addaan iti |
titulo | kuerdas nga | elemento nga | amad | '' . | Default a pateg ti paulo no No ti maysa a panagandar ket naited, daytoy ket maawaganto nga addaan ti |
kalbiten | kuerdas | 'hover nga pokus'. | Kasano a mai-trigger ti tooltip - i-klik ti | ag-hover nga | pokus | giya. Mabalin a lumasatka iti adu a trigger; pagsinaen ida babaen ti maysa nga espasio.
|
offset nga | numero | kuerdas nga | amad | 0 nga | Offset ti tooltip a relatibo iti puntiriana. No ti maysa a panagandar ket maus-usar a mangikeddeng ti offset, daytoy ket maawagan babaen ti maysa a banag a naglaon ti datos ti offset a kas ti umuna nga argumentona. Ti function ket masapul nga isublina ti maysa a banag nga addaan iti isu met laeng nga estruktura. Ti mangtignay nga elemento a DOM a nodo ket maipasa a kas ti maikadua nga argumento. Para iti ad-adu pay nga impormasion kitaen dagiti offset docs ti Popper.js . |
fallbackPanagplastar | kuerdas nga | array nga | 'ibaliktad' | Palubosan nga ikeddeng no ania a posision ti usaren ni Popper iti fallback. Para iti ad-adu pay nga impormasion kitaen dagiti dok ti kababalin ti Popper.js |
beddeng ti pagbeddengan | kuerdas nga | elemento | 'ag-scrollParent'. | Beddeng ti limitasion ti panaglablabes ti tooltip. Awaten dagiti pateg ti 'viewport' , 'window' , 'scrollParent' , wenno ti reperensia ti HTMLElement (JavaScript laeng). Para iti ad-adu pay nga impormasion kitaen ti preventOverflow docs ti Popper.js . |
sanitize nga aramiden | boolean nga | agpayso | Pagbalinen wenno balbaliwan ti sanitization. No ma-activate 'template' ken 'title' ma-sanitize dagiti pagpilian. |
puraw a Listaan | banag | Default nga pateg | Bagay a naglaon kadagiti maipalubos nga attribute ken tag |
sanitize ti Fn | null nga | amad | nawaswas | Ditoy a mabalinmo nga i-supply ti bukodmo a sanitize function. Mabalin a makatulong daytoy no kaykayatmo ti agusar iti naisangsangayan a libraria tapno maaramid ti sanitization. |
popperKonfig | null nga | banag | nawaswas | Tapno baliwan ti default a Popper.js a konfigurasion ti Bootstrap, kitaen ti panagisaad ti Popper.js |
Dagiti attribute ti datos para kadagiti indibidual a toltip
Dagiti pagpilian para kadagiti indibidual a toltip ket mabalin a alternatibo a maikeddeng babaen ti panagusar kadagiti kababalin ti datos, a kas naipalawag iti ngato.
Dagiti Pamay-an
Dagiti asynchronous a pamay-an ken panagbalbaliw
Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .
Kitaen ti dokumentasionmi iti JavaScript para iti ad-adu pay nga impormasion .
$().tooltip(options)
Ikapet ti tooltip handler iti maysa a koleksion ti elemento.
.tooltip('show')
Ipalgakna ti tooltip ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita ti tooltip (kayatna a sawen sakbay a shown.bs.tooltip
mapasamak ti pasamak). Maibilang daytoy a “manual” a panangtignay iti tooltip. Dagiti Tooltip nga addaan kadagiti zero-length a paulo ket saan a pulos a maiparang.
.tooltip('hide')
Ilemmeng ti tooltip ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a nailemmeng ti tooltip (kayatna a sawen sakbay a hidden.bs.tooltip
mapasamak ti pasamak). Maibilang daytoy a “manual” a panangtignay iti tooltip.
.tooltip('toggle')
I-toggle ti tooltip ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita wenno nailemmeng ti tooltip (kayatna a sawen sakbay a mapasamak ti shown.bs.tooltip
wenno hidden.bs.tooltip
pasamak). Maibilang daytoy a “manual” a panangtignay iti tooltip.
.tooltip('dispose')
Ilemmeng ken dadaelenna ti tooltip ti maysa nga elemento. Dagiti tip ti ramit nga agus-usar ti delegasion (a naparsua babaen ti panagusar ti selector
pagpilian ) ket saan a mabalin a saggaysa a madadael kadagiti kaputotan a mangtignay nga elemento.
.tooltip('enable')
Mangted ti tooltip ti maysa nga elemento ti abilidad a maipakita. Dagiti Tooltip ket napalubosan babaen ti default.
.tooltip('disable')
Ikkaten ti abilidad para iti tooltip ti maysa nga elemento a maipakita. Ti tooltip ket mabalin laeng a maipakita no daytoy ket na-enable manen.
.tooltip('toggleEnabled')
I-toggles ti abilidad para iti tooltip ti maysa nga elemento a maipakita wenno mailemmeng.
.tooltip('update')
Ipabaro ti posision ti tooltip ti maysa nga elemento.
Dagiti Pasamak
Kita ti Pasamak | Panangiladawan |
---|---|
ipakita.bs.tooltip | Daytoy a pasamak ket agputok a dagus no ti show pamay-an ti pagarigan ket maawagan. |
naipakita.bs.tooltip | Daytoy a pasamak ket mapaputok no ti tooltip ket naaramiden a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas). |
ilemmeng.bs.tipo ti ramit | Daytoy a pasamak ket dagus a mapaputok no ti hide pamay-an ti pagarigan ket naawagan. |
nailemmeng.bs.tooltip | Daytoy a pasamak ket mapaputok no ti tooltip ket nalpas a nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a makompleto). |
naikabil.bs.tooltip | Daytoy a pasamak ket mapaputok kalpasan ti show.bs.tooltip pasamak no ti plantilia ti tooltip ket nainayon iti DOM. |