Source

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.jsa naglaon iti Popper.js tapno agtrabaho dagiti tooltip!
  • No mangbangbangonka iti JavaScript-mi manipud iti gubuayan, kasapulanna tiutil.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 .disabledwenno disableddagiti 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-motionpanagsaludsod 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-toggleattribute-da:

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

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.

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

Ti posision ti Tooltip ket padasenna ti automatiko a panagbalbaliw no ti maysa a nagannak a pagkargaan ket addaan overflow: autowenno overflow: scrollkas ti .table-responsive, ngem pagtalinaedenna pay laeng ti posision ti orihinal a pannakaikabil. Tapno marisut, ikeddeng ti boundarypagpilian 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 dataattribute ken titleiti 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 topbabaen 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. Mainayon pay, kaaduan a makatulong a teknolohia ti agdama a dida ipakaammo ti tooltip iti daytoy a kasasaad.

Mainayon pay, dika agpannuray laeng a hoverkas 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 disabledattribute 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-eventsiti 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="".

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: container: 'body'. Daytoy a pagpilian ket nangruna a makatulong gapu ta daytoy ket mangipalubos kenka a mangiposision ti tooltip iti panagayus ti dokumento iti asideg ti mangtignay nga elemento - a manglapped ti tooltip manipud iti panagtaytayab nga adayo manipud iti mangtignay nga elemento bayat ti panagbalbaliw ti kadakkel ti tawa.
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:delay: { "show": 500, "hide": 100 }
html nga boolean nga saan nga agpayso

Palubosan ti HTML iti tooltip.

No pudno, dagiti etiketa ti HTML iti tooltip's titleket maiparangto iti tooltip. No palso, ti textpamay-an ti jQuery ket mausarto a mangikabil ti linaon iti DOM.

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 autonaikeddeng, daytoy ket dinamiko a mangiturong manen ti tooltip.

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 thiskonteksto ket naikeddeng iti instansia ti tooltip.
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.onsuporta). 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 titleket mai-inject iti .tooltip-inner.

.arrowagbalinto a pana ti tooltip.

Ti akinruar unay nga elemento ti balkot ket rumbeng nga addaan iti .tooltipklase ken role="tooltip".
titulo kuerdas nga | elemento nga | amad '' .

Default a pateg ti paulo no titleawan ti attribute.

No ti maysa a panagandar ket naited, daytoy ket maawaganto nga addaan ti thisreperensiana a naikabil iti elemento a nakaikapet ti tooltip.
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.

'manual'ipamatmatna a ti tooltip ket maitignayto a programatiko babaen ti .tooltip('show'), .tooltip('hide')ken dagiti pamay- .tooltip('toggle')an; daytoy a pateg ket saan a mabalin a maitipon iti ania man a sabali a trigger.

'hover'iti bukodna ket agresulta kadagiti tooltip a saan a mai-trigger babaen ti teklado, ken rumbeng laeng a mausar no adda dagiti alternatibo a pamay-an para iti panangipatulod ti isu met laeng nga impormasion para kadagiti agar-aramat ti teklado.
offset nga numero | kuerdas 0 nga Offset ti tooltip a relatibo iti puntiriana. 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 .

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.tooltipmapasamak 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.tooltipmapasamak 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.tooltipwenno hidden.bs.tooltippasamak). 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 selectorpagpilian ) 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 showpamay-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 hidepamay-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.tooltippasamak no ti plantilia ti tooltip ket nainayon iti DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})