Source

Mga tooltip

Dokumentasyon ug mga pananglitan alang sa pagdugang sa custom Bootstrap tooltips uban sa CSS ug JavaScript gamit ang CSS3 alang sa mga animation ug data-attributes alang sa lokal nga pagtipig sa titulo.

Overview

Mga butang nga mahibal-an kung gamiton ang tooltip plugin:

  • Ang mga tooltip nagsalig sa 3rd party nga librarya nga Popper.js para sa pagposisyon. Kinahanglan nimong iapil ang popper.min.js sa dili pa ang bootstrap.js o gamiton bootstrap.bundle.min.js/ bootstrap.bundle.jsnga adunay Popper.js aron magamit ang mga tooltip!
  • Kung nagtukod ka sa among JavaScript gikan sa gigikanan, kinahanglan kiniutil.js .
  • Ang mga tooltip kay nag-opt-in para sa mga rason sa performance, mao nga ikaw mismo ang mag-initialize niini .
  • Ang mga tooltip nga adunay zero-length nga mga titulo wala gayud ipakita.
  • Tinoa container: 'body'aron malikayan ang mga problema sa paghubad sa mas komplikado nga mga sangkap (sama sa among mga grupo sa input, mga grupo sa butones, ug uban pa).
  • Ang pag-trigger sa mga tooltip sa tinago nga mga elemento dili molihok.
  • Ang mga tooltip para sa .disabledo disabledmga elemento kinahanglang ma-trigger sa usa ka elemento sa wrapper.
  • Kung na-trigger gikan sa mga hyperlink nga nagsangkad sa daghang linya, ang mga tooltip masentro. Gamita white-space: nowrap;sa imong <a>s aron malikayan kini nga kinaiya.
  • Kinahanglang itago ang mga tooltip sa dili pa makuha ang mga katugbang nga elemento niini gikan sa DOM.
  • Ang mga tooltip mahimong ma-trigger salamat sa usa ka elemento sa sulod sa usa ka anino nga DOM.

Ang epekto sa animation niini nga sangkap nagdepende sa prefers-reduced-motionpangutana sa media. Tan-awa ang gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .

Nakuha ang tanan? Nindot, tan-awon nato kung giunsa nila pagtrabaho ang pipila ka mga pananglitan.

Pananglitan: I-enable ang mga tooltip bisan asa

Usa ka paagi sa pagsugod sa tanan nga mga tooltip sa usa ka panid mao ang pagpili niini pinaagi sa ilang mga data-togglehiyas:

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

Mga pananglitan

Pag-hover sa mga link sa ubos aron makita ang mga tooltip:

Tight pants next level keffiyeh basin wala pa nimo nadunggan. Photo booth bungot hilaw nga denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, ang fixie ni mcsweeney nga malungtaron nga quinoa 8-bit american nga sapot adunay terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, upat ka loko mcsweeney's cleanse vegan chambray. Usa ka tinuod nga ironic artisan bisan unsa nga keytar , scenester farm-to-table banksy Austin twitter nagdumala sa freegan cred raw denim single-origin coffee viral.

Hover ibabaw sa mga buton sa ubos aron makita ang upat ka mga tooltip nga direksyon: ibabaw, tuo, ubos, ug wala.

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

Ug uban sa naandan nga HTML gidugang:

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

Paggamit

Ang tooltip plugin nagmugna og sulod ug markup sa panginahanglan, ug sa default nagbutang sa mga tooltip human sa ilang trigger nga elemento.

I-trigger ang tooltip pinaagi sa JavaScript:

$('#example').tooltip(options)
Pag- awas autougscroll

Ang posisyon sa tooltip mosulay sa awtomatikong pag-usab kung ang usa ka ginikanan nga sudlanan adunay overflow: autoo overflow: scrollgusto sa among .table-responsive, apan gitipigan gihapon ang posisyon sa orihinal nga pagbutang. Aron masulbad, itakda ang boundarykapilian sa bisan unsa gawas sa default nga kantidad, 'scrollParent', sama sa 'window':

$('#example').tooltip({ boundary: 'window' })

Markup

Ang gikinahanglan nga markup para sa tooltip kay usa lang ka dataattribute ug titlesa HTML nga elemento gusto nimo nga naay tooltip. Ang nahimo nga markup sa usa ka tooltip kay yano ra, bisan kung kini nanginahanglan usa ka posisyon (sa default, gitakda topsa plugin).

Ang paghimo sa mga tooltip nga magamit alang sa keyboard ug assistive nga mga tiggamit sa teknolohiya

Kinahanglan nga imong idugang ang mga tooltip sa HTML nga mga elemento nga tradisyonal nga mapunting sa keyboard ug interactive (sama sa mga link o mga kontrol sa porma). Bisan tuod ang arbitraryong HTML nga mga elemento (sama sa <span>s) mahimong mapokus pinaagi sa pagdugang sa tabindex="0"hiyas, kini makadugang sa posibleng makalagot ug makalibog nga mga paghunong sa tab sa dili interactive nga mga elemento alang sa mga tiggamit sa keyboard, ug kadaghanan sa mga teknolohiya sa pagtabang sa pagkakaron wala magpahibalo sa tooltip niini nga sitwasyon. Dugang pa, ayaw pagsalig lamang hoveringon nga gatilyo sa imong tooltip, tungod kay kini maghimo sa imong mga tooltip nga imposible nga ma-trigger alang sa mga tiggamit sa keyboard.

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

Mga disabled nga elemento

Ang mga elemento nga adunay disabledattribute dili interactive, nagpasabot nga ang mga user dili maka-focus, maka-hover, o maka-click niini aron ma-trigger ang tooltip (o popover). Isip usa ka workaround, gusto nimong i-trigger ang tooltip gikan sa usa ka wrapper <div>o <span>, mas maayo nga gihimo nga keyboard-focusable gamit ang tabindex="0", ug i-override ang pointer-eventssa disabled 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>

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-animation="".

Timan-i nga alang sa mga hinungdan sa seguridad ang sanitize, sanitizeFnug whiteListmga kapilian dili mahatag gamit ang mga hiyas sa datos.

Ngalan Matang Default Deskripsyon
animation boolean tinuod Ibutang ang CSS fade transition sa tooltip
sudlanan hilo | elemento | bakak bakak

Gidugang ang tooltip sa usa ka piho nga elemento. Pananglitan: container: 'body'. Kini nga kapilian labi ka mapuslanon tungod kay kini nagtugot kanimo sa pagpahimutang sa tooltip sa dagan sa dokumento duol sa nag-trigger nga elemento - nga makapugong sa tooltip gikan sa paglutaw gikan sa nag-trigger nga elemento sa panahon sa pagbag-o sa bintana.
paglangan numero | butang 0

Paglangan sa pagpakita ug pagtago sa tooltip (ms) - dili magamit sa manual trigger type

Kung adunay gihatag nga numero, ang paglangan magamit sa parehas nga pagtago/pagpakita

Ang istruktura sa butang mao ang:delay: { "show": 500, "hide": 100 }
html boolean bakak

Tugoti ang HTML sa tooltip.

Kung tinuod, ang mga HTML tag sa tooltip's titleiga-render sa tooltip. Kung bakak, ang pamaagi sa jQuery textgamiton sa pagsal-ot sa sulud sa DOM.

Gamit ug text kung nabalaka ka bahin sa mga pag-atake sa XSS.
pagbutang hilo | function 'ibabaw'

Giunsa pagpahimutang ang tooltip - awto | ibabaw | ubos | wala | husto.
Kung autogitino, kini dinamikong i-reorient ang tooltip.

Kung ang usa ka function gigamit aron mahibal-an ang pagbutang, kini gitawag nga adunay tooltip nga DOM node ingon ang una nga argumento ug ang hinungdan nga elemento nga DOM node ingon ikaduha. Ang thiskonteksto gitakda sa tooltip nga pananglitan.
tigpili hilo | bakak bakak Kung gihatag ang usa ka tigpili, ang mga butang sa tooltip itugyan sa gitakda nga mga target. Sa praktis, gigamit kini aron magamit usab ang mga tooltip sa dinamikong pagdugang sa mga elemento sa DOM ( jQuery.onsuporta). Tan-awa kini ug usa ka pananglitan nga impormatibo .
template hilo '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML nga gamiton sa paghimo sa tooltip.

Ang tooltip's titlei-inject sa .tooltip-inner.

.arrowmahimong pana sa tooltip.

Ang pinakagawas nga elemento sa wrapper kinahanglan adunay .tooltipklase ug role="tooltip".
titulo hilo | elemento | function ''

Default nga bili sa titulo kung wala ang titleattribute.

Kung gihatag ang usa ka function, tawgon kini kauban ang thisreference set sa elemento nga gilakip sa tooltip.
trigger hilo 'hover focus'

Giunsa pag-trigger ang tooltip - pag-klik | hover | focus | manwal. Mahimo nimong ipasa ang daghang mga trigger; ibulag sila sa usa ka luna.

'manual'nagpakita nga ang tooltip ma-trigger sa programmatically pinaagi sa .tooltip('show'), .tooltip('hide')ug .tooltip('toggle')mga pamaagi; kini nga bili dili mahimong ikombinar sa bisan unsa nga lain nga trigger.

'hover'sa iyang kaugalingon moresulta sa mga tooltip nga dili ma-trigger pinaagi sa keyboard, ug kinahanglan lang gamiton kung ang mga alternatibong pamaagi sa paghatud sa parehas nga kasayuran alang sa mga tiggamit sa keyboard naa.
offset numero | hilo | function 0

Offset sa tooltip kalabot sa target niini.

Kung ang usa ka function gigamit aron mahibal-an ang offset, gitawag kini nga adunay usa ka butang nga adunay sulud nga data sa offset ingon una nga argumento niini. Kinahanglang ibalik sa function ang usa ka butang nga adunay parehas nga istruktura. Ang triggering element nga DOM node gipasa isip ikaduhang argumento.

Alang sa dugang nga impormasyon tan-awa ang Popper.js's offset docs .
fallbackPlacement hilo | han-ay 'flip' Tugoti nga ipiho kung unsang posisyon ang gamiton ni Popper sa fallback. Para sa dugang nga impormasyon tan-awa ang Popper.js's behavior docs
utlanan hilo | elemento 'scrollParent' Pag-awas sa pagpugong sa utlanan sa tooltip. Gidawat ang mga kantidad sa 'viewport', 'window', 'scrollParent', o usa ka HTMLElement reference (JavaScript lang). Alang sa dugang nga impormasyon tan-awa ang Popper.js's preventOverflow docs .
sanitize boolean tinuod I-enable o i-disable ang sanitization. Kung gi-aktibo 'template'ug 'title'ang mga kapilian ma-sanitize.
whitelist butang Default nga bili Ang butang nga adunay gitugotan nga mga hiyas ug mga tag
sanitizeFn null | function null Dinhi mahimo nimong ihatag ang imong kaugalingon nga sanitize function. Mahimong mapuslanon kini kung gusto nimo nga mogamit usa ka gipahinungod nga librarya aron mahimo ang sanitization.
popperConfig null | butang null Aron usbon ang default nga Popper.js config sa Bootstrap, tan-awa ang configuration sa Popper.js

Mga hiyas sa datos alang sa indibidwal nga mga tooltip

Ang mga kapilian alang sa indibidwal nga mga tooltip mahimong ipiho pinaagi sa paggamit sa mga hiyas sa datos, ingon sa gipatin-aw sa ibabaw.

Pamaagi

Asynchronous nga mga pamaagi ug transisyon

Ang tanan nga mga pamaagi sa API kay asynchronous ug magsugod ug transisyon . Mibalik sila sa nanawag sa diha nga nagsugod ang transisyon apan sa wala pa kini matapos . Dugang pa, ang usa ka paagi sa pagtawag sa usa ka transisyon nga sangkap dili tagdon .

Tan-awa ang among JavaScript nga dokumentasyon para sa dugang nga impormasyon .

$().tooltip(options)

Naglakip sa tigdumala sa tooltip sa usa ka koleksyon sa elemento.

.tooltip('show')

Nagpadayag sa tooltip sa usa ka elemento. Mibalik sa nagtawag sa wala pa ipakita ang tooltip (ie sa wala pa shown.bs.tooltipmahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa tooltip. Ang mga tooltip nga adunay zero-length nga mga titulo wala gayud ipakita.

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

.tooltip('hide')

Nagtago sa tooltip sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang tooltip gitago (ie sa wala pa hidden.bs.tooltipmahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa tooltip.

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

.tooltip('toggle')

I-toggle ang tooltip sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang tooltip gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.tooltipo hidden.bs.tooltippanghitabo). Giisip kini nga "manwal" nga pag-trigger sa tooltip.

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

.tooltip('dispose')

Nagtago ug nagguba sa tooltip sa usa ka elemento. Ang mga tooltip nga naggamit sa delegasyon (nga gimugna gamit ang selectoropsyon ) dili mahimong tagsa-tagsa nga gub-on sa descendant trigger elements.

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

.tooltip('enable')

Naghatag sa tooltip sa elemento sa abilidad nga ipakita. Ang mga tooltip gipalihok pinaagi sa default.

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

.tooltip('disable')

Gitangtang ang abilidad nga ipakita ang tooltip sa usa ka elemento. Mapakita lang ang tooltip kung kini ma-enable pag-usab.

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

.tooltip('toggleEnabled')

I-toggle ang abilidad sa tooltip sa usa ka elemento nga ipakita o itago.

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

.tooltip('update')

Gi-update ang posisyon sa tooltip sa usa ka elemento.

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

Mga panghitabo

Uri sa Hitabo Deskripsyon
show.bs.tooltip Kini nga panghitabo nagdilaab dayon kung ang showpamaagi sa pananglitan gitawag.
gipakita.bs.tooltip Kini nga panghitabo gipabuto kung ang tooltip nahimo nang makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
hide.bs.tooltip Kini nga panghitabo gipabuto dayon kung ang hidepamaagi sa pananglitan gitawag na.
hidden.bs.tooltip Kini nga panghitabo gipabuto kung ang tooltip nahuman na nga gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
gisulod.bs.tooltip Kini nga panghitabo gipabuto pagkahuman sa show.bs.tooltippanghitabo kung ang template sa tooltip gidugang sa DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})