Source

Mga tooltip

Dokumentasyon at mga halimbawa para sa pagdaragdag ng custom na Bootstrap tooltip na may CSS at JavaScript gamit ang CSS3 para sa mga animation at data-attribute para sa lokal na imbakan ng pamagat.

Pangkalahatang-ideya

Mga bagay na dapat malaman kapag ginagamit ang tooltip plugin:

  • Umaasa ang mga tooltip sa 3rd party na library na Popper.js para sa pagpoposisyon. Dapat mong isama ang popper.min.js bago ang bootstrap.js o gamitin ang bootstrap.bundle.min.js/ bootstrap.bundle.jsna naglalaman ng Popper.js upang gumana ang mga tooltip!
  • Kung binubuo mo ang aming JavaScript mula sa pinagmulan, nangangailanganutil.js ito ng .
  • Ang mga tooltip ay nag-opt-in para sa mga dahilan ng pagganap, kaya dapat mong simulan ang mga ito sa iyong sarili .
  • Ang mga tooltip na may zero-length na mga pamagat ay hindi kailanman ipinapakita.
  • Tukuyin container: 'body'upang maiwasan ang pag-render ng mga problema sa mas kumplikadong mga bahagi (tulad ng aming mga pangkat ng input, mga pangkat ng button, atbp).
  • Ang pag-trigger ng mga tooltip sa mga nakatagong elemento ay hindi gagana.
  • Ang mga tooltip para sa .disabledo mga disabledelemento ay dapat na ma-trigger sa isang elemento ng wrapper.
  • Kapag na-trigger mula sa mga hyperlink na sumasaklaw sa maraming linya, ang mga tooltip ay igigitna. Gamitin white-space: nowrap;sa iyong <a>s upang maiwasan ang pag-uugaling ito.
  • Dapat itago ang mga tooltip bago maalis ang mga kaukulang elemento nito sa DOM.
  • Maaaring ma-trigger ang mga tooltip salamat sa isang elemento sa loob ng shadow DOM.

Ang epekto ng animation ng bahaging ito ay nakasalalay sa prefers-reduced-motionquery ng media. Tingnan ang seksyon ng pinababang paggalaw ng aming dokumentasyon ng pagiging naa-access .

Nakuha ang lahat ng iyon? Mahusay, tingnan natin kung paano gumagana ang mga ito sa ilang mga halimbawa.

Halimbawa: Paganahin ang mga tooltip sa lahat ng dako

Ang isang paraan upang simulan ang lahat ng mga tooltip sa isang pahina ay ang piliin ang mga ito ayon sa kanilang data-togglekatangian:

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

Mga halimbawa

Mag-hover sa mga link sa ibaba upang makita ang mga tooltip:

Tight pants next level keffiyeh malamang hindi mo pa narinig. Photo booth balbas raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, ang mcsweeney's fixie sustainable quinoa 8-bit american apparel ay may terry richardson vinyl chambray. Balbas stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, apat na loko mcsweeney's cleanse vegan chambray. Isang talagang ironic artisan kahit anong keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Mag-hover sa mga button sa ibaba upang makita ang apat na mga direksyon ng tooltip: itaas, kanan, ibaba, at kaliwa.

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

At may idinagdag na custom na 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>

Paggamit

Ang tooltip plugin ay bumubuo ng content at markup on demand, at bilang default ay naglalagay ng mga tooltip pagkatapos ng kanilang trigger element.

I-trigger ang tooltip sa pamamagitan ng JavaScript:

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

Ang posisyon ng tooltip ay sumusubok na awtomatikong magbago kapag ang isang pangunahing container ay mayroon overflow: autoo overflow: scrollnagustuhan ang aming .table-responsive, ngunit pinapanatili pa rin ang pagpoposisyon ng orihinal na placement. Upang malutas, itakda ang boundaryopsyon sa anumang bagay maliban sa default na halaga, 'scrollParent', tulad ng 'window':

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

Markup

Ang kinakailangang markup para sa isang tooltip ay isang datakatangian lamang at titlesa HTML element na nais mong magkaroon ng isang tooltip. Ang nabuong markup ng isang tooltip ay medyo simple, bagama't nangangailangan ito ng isang posisyon (bilang default, nakatakda sa toppamamagitan ng plugin).

Ang paggawa ng mga tooltip ay gumagana para sa mga gumagamit ng keyboard at pantulong na teknolohiya

Dapat ka lang magdagdag ng mga tooltip sa mga elemento ng HTML na tradisyonal na nakatuon sa keyboard at interactive (tulad ng mga link o mga kontrol sa form). Bagama't ang mga di-makatwirang elemento ng HTML (tulad ng <span>s) ay maaaring gawing focusable sa pamamagitan ng pagdaragdag ng tabindex="0"attribute, magdaragdag ito ng potensyal na nakakainis at nakakalito na mga tab stop sa mga hindi interactive na elemento para sa mga user ng keyboard. Bilang karagdagan, karamihan sa mga teknolohiyang pantulong ay kasalukuyang hindi nag-aanunsyo ng tooltip sa sitwasyong ito.

Bukod pa rito, huwag umasa lamang hoverbilang trigger para sa iyong tooltip, dahil gagawin nitong imposibleng ma-trigger ang iyong mga tooltip para sa mga user ng 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 elementong may kapansanan

Ang mga elementong may disabledkatangian ay hindi interactive, ibig sabihin, ang mga user ay hindi maaaring tumuon, mag-hover, o mag-click sa mga ito upang mag-trigger ng tooltip (o popover). Bilang isang solusyon, gugustuhin mong i-trigger ang tooltip mula sa isang wrapper <div>o <span>, perpektong ginawang keyboard-focusable gamit tabindex="0"ang , at i-override ang pointer-eventssa naka-disable na 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 pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-animation="".

Pangalan Uri Default Paglalarawan
animation boolean totoo Maglapat ng CSS fade transition sa tooltip
lalagyan string | elemento | mali mali

Idinaragdag ang tooltip sa isang partikular na elemento. Halimbawa: container: 'body'. Ang pagpipiliang ito ay partikular na kapaki-pakinabang dahil pinapayagan ka nitong iposisyon ang tooltip sa daloy ng dokumento malapit sa nagti-trigger na elemento - na pipigil sa tooltip na lumutang palayo sa nagti-trigger na elemento sa panahon ng pagbabago ng laki ng window.
pagkaantala numero | bagay 0

Pagkaantala sa pagpapakita at pagtatago ng tooltip (ms) - hindi nalalapat sa manu-manong uri ng pag-trigger

Kung may ibinigay na numero, ilalapat ang pagkaantala sa parehong itago/ipakita

Ang istraktura ng bagay ay:delay: { "show": 500, "hide": 100 }
html boolean mali

Payagan ang HTML sa tooltip.

Kung totoo, ang mga HTML na tag sa tooltip titleay ire-render sa tooltip. Kung mali, ang textpamamaraan ng jQuery ay gagamitin upang magpasok ng nilalaman sa DOM.

Gumamit ng text kung nag-aalala ka tungkol sa mga pag-atake ng XSS.
pagkakalagay string | function 'itaas'

Paano iposisyon ang tooltip - auto | tuktok | ibaba | kaliwa | tama.
Kapag autotinukoy, dynamic nitong i-reorient ang tooltip.

Kapag ginamit ang isang function upang matukoy ang placement, tinatawag itong tooltip DOM node bilang unang argumento nito at ang triggering element na DOM node bilang pangalawa nito. Nakatakda ang thiskonteksto sa instance ng tooltip.
tagapili string | mali mali Kung may ibibigay na tagapili, ang mga bagay sa tooltip ay idelegado sa mga tinukoy na target. Sa pagsasagawa, ito ay ginagamit upang ilapat din ang mga tooltip sa dynamic na idinagdag na mga elemento ng DOM ( jQuery.onsuporta). Tingnan ito at isang halimbawang nagbibigay-kaalaman .
template string '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML na gagamitin kapag gumagawa ng tooltip.

Ang mga tooltip titleay ilalagay sa .tooltip-inner.

.arroway magiging arrow ng tooltip.

Ang pinakamalawak na elemento ng wrapper ay dapat magkaroon ng .tooltipklase at role="tooltip".
pamagat string | elemento | function ''

Default na halaga ng pamagat kung titlewalang katangian.

Kung ang isang function ay ibinigay, ito ay tatawagin kasama ang thisreference na nakatakda sa elemento kung saan ang tooltip ay naka-attach sa.
gatilyo string 'hover focus'

Paano na-trigger ang tooltip - i-click ang | mag-hover | focus | manwal. Maaari kang magpasa ng maraming trigger; paghiwalayin sila ng isang puwang.

'manual'ay nagpapahiwatig na ang tooltip ay ma-trigger sa pamamagitan ng programmatically sa pamamagitan ng .tooltip('show'), .tooltip('hide')at mga .tooltip('toggle')pamamaraan; hindi maaaring isama ang halagang ito sa anumang iba pang trigger.

'hover'magreresulta sa sarili nitong mga tooltip na hindi ma-trigger sa pamamagitan ng keyboard, at dapat lang gamitin kung may mga alternatibong pamamaraan para sa paghahatid ng parehong impormasyon para sa mga user ng keyboard.
offset numero | string 0 Offset ng tooltip na nauugnay sa target nito. Para sa higit pang impormasyon sumangguni sa mga offset na doc ng Popper.js .
fallbackPlacement string | array 'flip' Payagan na tukuyin kung aling posisyon ang gagamitin ng Popper sa fallback. Para sa higit pang impormasyon sumangguni sa mga doc ng pag -uugali ng Popper.js
hangganan string | elemento 'scrollParent' Overflow constraint hangganan ng tooltip. Tumatanggap ng mga value ng 'viewport', 'window', 'scrollParent', o isang HTMLElement reference (JavaScript lang). Para sa higit pang impormasyon sumangguni sa preventOverflow docs ng Popper.js .

Mga katangian ng data para sa mga indibidwal na tooltip

Ang mga opsyon para sa mga indibidwal na tooltip ay maaaring tukuyin sa pamamagitan ng paggamit ng mga katangian ng data, gaya ng ipinaliwanag sa itaas.

Paraan

Mga asynchronous na pamamaraan at paglipat

Ang lahat ng mga pamamaraan ng API ay asynchronous at nagsisimula ng isang paglipat . Bumalik sila sa tumatawag sa sandaling magsimula ang paglipat ngunit bago ito matapos . Bilang karagdagan, babalewalain ang isang method call sa isang transitioning component .

Tingnan ang aming dokumentasyon ng JavaScript para sa higit pang impormasyon .

$().tooltip(options)

Nag-a-attach ng tooltip handler sa isang koleksyon ng elemento.

.tooltip('show')

Nagpapakita ng tooltip ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang tooltip (ibig sabihin, bago shown.bs.tooltipmangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng tooltip. Ang mga tooltip na may zero-length na mga pamagat ay hindi kailanman ipinapakita.

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

.tooltip('hide')

Itinatago ang tooltip ng isang elemento. Bumabalik sa tumatawag bago pa talaga naitago ang tooltip (ibig sabihin, bago hidden.bs.tooltipmangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng tooltip.

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

.tooltip('toggle')

I-toggle ang tooltip ng isang elemento. Bumabalik sa tumatawag bago ang tooltip ay aktwal na naipakita o naitago (ibig sabihin, bago mangyari ang shown.bs.tooltipo hidden.bs.tooltipkaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng tooltip.

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

.tooltip('dispose')

Itinatago at sinisira ang tooltip ng isang elemento. Ang mga tooltip na gumagamit ng delegasyon (na ginawa gamit ang selectoropsyon ) ay hindi maaaring isa-isang sirain sa mga elemento ng descendant na trigger.

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

.tooltip('enable')

Nagbibigay sa tooltip ng elemento ng kakayahang ipakita. Ang mga tooltip ay pinagana bilang default.

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

.tooltip('disable')

Tinatanggal ang kakayahang ipakita ang tooltip ng isang elemento. Maipapakita lang ang tooltip kung ito ay muling pinagana.

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

.tooltip('toggleEnabled')

I-toggle ang kakayahang ipakita o itago ang tooltip ng isang elemento.

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

.tooltip('update')

Ina-update ang posisyon ng tooltip ng isang elemento.

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

Mga kaganapan

Uri ng kaganapan Paglalarawan
show.bs.tooltip Agad na gagana ang kaganapang ito kapag showtinawag ang paraan ng instance.
ipinapakita.bs.tooltip Ang kaganapang ito ay pinapagana kapag ang tooltip ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS).
hide.bs.tooltip Agad na pinapagana ang kaganapang ito kapag hidetinawag na ang paraan ng instance.
hidden.bs.tooltip Ang kaganapang ito ay pinapagana kapag ang tooltip ay tapos nang itago mula sa user (maghihintay para sa mga transition ng CSS na makumpleto).
ipinasok.bs.tooltip Ang kaganapang ito ay pinapagana pagkatapos ng show.bs.tooltipkaganapan kapag ang template ng tooltip ay naidagdag sa DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})