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:
- Agpannuray dagiti Tooltip iti 3rd party library Popper 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 tapno agtrabaho dagiti toltips! - 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.
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:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Dagiti pagarigan
I-hover dagiti link iti baba tapno makita dagiti toltips:
Teksto ti placeholder tapno maipakita ti sumagmamano nga inline a silpo nga addaan kadagiti tooltip. Filler laeng itan daytoy, awan ti mammapatay. Linaon a naikabil ditoy tapno laeng matulad ti kaadda ti pudno a teksto . Ket amin dagita tapno laeng mangted kenka iti ideya no kasano ti langa dagiti toltips no mausar kadagiti pudno a kasasaad. Isu a sapay koma ta nakitamon itan no kasano a dagitoy a tooltip kadagiti silpo ket mabalin nga agtrabaho iti praktis, apaman nga usarem dagitoy iti bukodmo a site wenno proyekto.
I-hover dagiti buton iti baba tapno makitam ti uppat a direksion ti toltips: ngato, kannawan, baba, ken kannigid.
<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>
Ket babaen ti nainayon a kostumbre nga 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>
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:
$('#example').tooltip(options)
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'
:
$('#example').tooltip({ boundary: '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.
<!-- 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>
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.
<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>
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=""
.
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 ni Popper . |
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 ni Popper |
customKlase nga | kuerdas nga | amad | '' . | Inayon dagiti klase iti tooltip no maipakita dayta. Imutektekanyo a dagitoy a klase ket mainayonto a mainayon kadagiti ania man a klase a naikeddeng iti plantilia. Tapno mainayon ti adu a klase, pagsinaen dagitoy babaen kadagiti espasyo: Mabalinmo pay nga ipasa ti maysa a panagandar a rumbeng nga agsubli ti maymaysa a kuerdas a naglaon kadagiti kanayonan a nagan ti klase. |
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 dagiti dokumento ti preventOverflow ti Popper . |
sanitize nga aramiden | boolean nga | agpayso | Pagbalinen wenno balbaliwan ti sanitization. No ma-activate 'template' ken 'title' ma-sanitize dagiti pagpilian. Kitaen ti benneg ti sanitizer iti dokumentasionmi iti JavaScript . |
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 a konfigurasion ti Bootstrap, kitaen ti panagisaad ti Popper |
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.
$('#element').tooltip('show')
.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.
$('#element').tooltip('hide')
.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.
$('#element').tooltip('toggle')
.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.
$('#element').tooltip('dispose')
.tooltip('enable')
Mangted ti tooltip ti maysa nga elemento ti abilidad a maipakita. Dagiti Tooltip ket napalubosan babaen ti default.
$('#element').tooltip('enable')
.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.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
I-toggles ti abilidad para iti tooltip ti maysa nga elemento a maipakita wenno mailemmeng.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Ipabaro ti posision ti tooltip ti maysa nga elemento.
$('#element').tooltip('update')
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. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})