Source

Tooltips

Documentation sy ohatra amin'ny fampidirana fitaovana Bootstrap mahazatra miaraka amin'ny CSS sy JavaScript amin'ny fampiasana CSS3 ho an'ny sary mihetsika sy data-attributes amin'ny fitahirizana lohateny eo an-toerana.

Overview

Zavatra tokony ho fantatra rehefa mampiasa ny plugin tooltip:

  • Miantehitra amin'ny tranokalan'ny antoko faha-3 Popper.js ny toro-hevitra momba ny fametrahana toerana. Tsy maintsy ampidirinao ny popper.min.js alohan'ny bootstrap.js na ampiasao bootstrap.bundle.min.js/ bootstrap.bundle.jsizay misy Popper.js mba hahafahan'ny toro-làlana miasa!
  • Raha manorina ny JavaScript avy amin'ny loharano ianao dia mitakyutil.js .
  • Ny toro-làlana dia mirotsaka noho ny antony fampisehoana, ka tsy maintsy ataonao voalohany izy ireo .
  • Tsy aseho mihitsy ny toro-lalana misy lohateny tsy misy halavany.
  • Mariho container: 'body'mba tsy hisian'ny olana amin'ny singa sarotra kokoa (toy ny vondrona fampidirana, vondrona bokotra, sns).
  • Tsy hahomby ny fametahana toro-hevitra amin'ny singa miafina.
  • Ny toro-làlana ho an'ny singa .disabledna ny disabledsinga dia tsy maintsy alefa amin'ny singa wrapper.
  • Rehefa voakitika avy amin'ny rohibe mivelatra andalana maromaro, dia ho afovoany ny toro-hevitra. Ampiasao white-space: nowrap;amin'ny <a>s anao mba hialana amin'izany fihetsika izany.
  • Tsy maintsy afenina ny toro-làlana alohan'ny hanesorana ireo singa mifandraika aminy ao amin'ny DOM.
  • Ny toro-làlana dia azo atomboka noho ny singa iray ao anaty aloka DOM.

Miankina amin'ny prefers-reduced-motionfangatahan'ny haino aman-jery ny fiantraikan'ity singa ity. Jereo ny fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .

Nahazo izany rehetra izany? Tsara, andao hojerentsika ny fomba fiasan'izy ireo miaraka amin'ny ohatra vitsivitsy.

Ohatra: Alefaso ny toro-hevitra amin'ny toerana rehetra

Ny fomba iray hanombohana ny toro-hevitra rehetra amin'ny pejy iray dia ny fisafidianana azy ireo amin'ny data-toggletoetrany:

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

OHATRA

Mitsangàna eo amin'ny rohy etsy ambany raha te hahita fitaovana:

pataloha tery next level keffiyeh angamba mbola tsy naheno azy ireo ianao. Tranon-tsary volombava manta denim letterpress vegan messenger bag stumptown. Seitan Farm-to-table, mcsweeney's fixie sustainable quinoa 8-bit american apparel dia manana terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, efatra loko mcsweeney's cleanse vegan chambray. Mpanao asa tanana tena mahatsikaiky na inona na inona keytar , scenester farm-to-table banksy Austin twitter mitantana freegan cred denim manta kafe tokana nipoitra.

Apetaho eo amin'ny bokotra etsy ambany hahitanao ireo toro-lalana efatra: ambony, havanana, ambany ary ankavia.

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

Ary nampiana HTML mahazatra:

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

Fampiasana

Ny plugin tooltip dia mamorona votoaty sy marika amin'ny fangatahana, ary amin'ny alàlan'ny default dia mametraka ny toro-hevitra aorian'ny singa trigger.

Alefaso amin'ny alalan'ny JavaScript ny toro-hevitra:

$('#example').tooltip(options)
Overflow autoaryscroll

Ny toeran'ny Tooltip dia manandrana miova ho azy rehefa manana overflow: autona overflow: scrolltia anay ny fitoeran'ny ray aman-dreny .table-responsive, saingy mbola mitazona ny toeran'ny toerana voalohany. Mba hamahana izany dia apetraho amin'ny boundaryzavatra hafa ankoatra ny sanda default 'scrollParent', toy ny 'window':

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

fanamarihana

Ny mari-pamantarana ilaina ho an'ny tondro-fitaovana dia datatoetra iray ihany ary titleamin'ny singa HTML tianao hananana tondro-fitaovana. Ny mari-pamantarana vokarina amin'ny tondro-fitaovana dia tsotra, na dia mitaky toerana aza izany (amin'ny alàlan'ny default, napetraky topny plugin).

Mampiasa toro-làlana ho an'ireo mpampiasa teknolojia manampy

Tokony hanampy toro-hevitra fotsiny amin'ny singa HTML izay azo ifantohan'ny fitendry mahazatra sy mifampiraharaha (toy ny rohy na fanaraha-maso endrika). <span>Na dia azo atao hifantoka amin'ny fampidirana ilay toetra aza ireo singa HTML tsy misy dikany (toy ny s) tabindex="0", ity dia hanampy ny fijanonana kiheba mety hanelingelina sy mampisafotofoto amin'ny singa tsy misy fifampiraharahana ho an'ny mpampiasa klavier, ary ny ankamaroan'ny teknolojia manampy amin'izao fotoana izao dia tsy manambara ny fitaovana amin'ity toe-javatra ity. Fanampin'izany, aza miantehitra fotsiny amin'ny hovermaha-trigger ho an'ny tondro-fitaovanao, satria izany dia hahatonga ny tondro-fitaovanao ho tsy azo aterina ho an'ny mpampiasa fitendry.

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

singa kilemaina

Ny singa manana ny disabledtoetra dia tsy mifampiresaka, midika izany fa ny mpampiasa dia tsy afaka hifantoka, hivezivezy, na hanindry azy ireo hanetsika fitaovana (na popover). Amin'ny maha-famoahana azy dia te-hamosika ny tohin'ny fitaovana ianao avy amin'ny fonony <div>na <span>, natao tsara indrindra ho an'ny fitendry hifantoka amin'ny fampiasana tabindex="0", ary hanilika ny pointer-eventsao amin'ny singa kilemaina.

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-animation="".

Mariho fa noho ny antony fiarovana ny sanitize, sanitizeFnsy ny whiteListsafidy dia tsy azo omena amin'ny alàlan'ny toetran'ny data.

Anarana Type toerana misy anao Description
fanentanana boolean marina Ampiharo CSS fade transition amin'ny tooltip
fitoeran-javatra string | singa | DISO DISO

Ampidiro amin'ny singa manokana ny tondro-fitaovana. Ohatra: container: 'body'. Ity safidy ity dia tena ilaina indrindra amin'ny ahafahanao mametraka ny torolalana amin'ny fikorianan'ny antontan-taratasy eo akaikin'ny singa manentana - izay hisakana ny fitaovana tsy hitsingevana hiala amin'ny singa manentana mandritra ny fanovana ny haben'ny varavarankely.
fahatarana laharana | zavatra 0

Fanemorana ny fampisehoana sy ny fanafenana ny toro-hevitra (ms) - tsy mihatra amin'ny karazana trigger manual

Raha misy isa omena dia mihatra amin'ny fanafenana/seho ny fahatarana

Ny firafitry ny zavatra dia:delay: { "show": 500, "hide": 100 }
html boolean DISO

Avelao ao amin'ny tondro-fitaovana ny HTML.

titleRaha marina, dia adika ao amin'ny tondro-fitaovana ny marika HTML ao amin'ny tondro- fitaovana. Raha diso, ny textfomba jQuery dia hampiasaina hampidirana votoaty ao amin'ny DOM.

Mampiasà lahatsoratra raha manahy momba ny fanafihana XSS ianao.
fametrahana string | asa 'top'

Ahoana ny fametrahana ny tondro-fitaovana - auto | ambony | ambany | ankavia | marina.
Rehefa autovoatondro dia hamerenana amin'ny fomba mavitrika ny toro-làlana.

Rehefa ampiasaina hamaritana ny fametrahana ny asa iray dia antsoina miaraka amin'ny node DOM tooltip ho tohan-kevitra voalohany ary ny singa DOM node ho azy faharoa. Ny thiscontexte dia apetraka amin'ny ohatra amin'ny tooltip.
mpifidy string | DISO DISO Raha misy mpifidy omena, dia atolotra amin'ireo tanjona voafaritra ireo zavatra kinendry fitaovana. Amin'ny fampiharana, ity dia ampiasaina mba hampiharana ireo toro-hevitra amin'ny singa DOM ( jQuery.onfanohanana) manampy amin'ny fomba mavitrika. Jereo ity ary ohatra misy fampahalalana .
môdely tady '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

HTML fototra ampiasaina amin'ny famoronana ny toro-hevitra.

Ampidirina titleao amin'ny .tooltip-inner.

.arrowho lasa zana-tsipìkan'ny fitaovana.

Ny singa wrapper ivelany indrindra dia tokony hanana ny .tooltipkilasy sy role="tooltip".
lohateny string | singa | asa ''

Sanda titre default raha titletsy misy ny toetra.

Raha misy asa omena, dia hantsoina miaraka amin'ny thisreferences napetraka amin'ny singa izay ampifandraisina amin'ny tooltip.
miteraka tady 'hover focus'

Ahoana ny fomba fandraisan'ny tooltip - tsindrio | hover | mifantoka | manual. Mety handalo trigger maromaro ianao; saraho amin'ny toerana iray izy ireo.

'manual'dia manondro fa ny toro-lalana dia ho voatarika amin'ny programa amin'ny alàlan'ny .tooltip('show'), .tooltip('hide')sy ny .tooltip('toggle')fomba; io sanda io dia tsy azo atambatra amin'ny trigger hafa.

'hover'Amin'ny maha-izy azy dia miteraka toro-hevitra izay tsy azo ampitaina amin'ny alalan'ny fitendry, ary tokony hampiasaina raha tsy misy fomba hafa hampita ny vaovao mitovy amin'ny mpampiasa fitendry.
offset laharana | string | asa 0

Ampifanaraho amin'ny lasibatra amin'ny tanjona.

Rehefa ampiasaina hamaritana ny offset ny asa iray, dia antsoina miaraka amin'ny zavatra misy ny data offset ho tohan-kevitra voalohany. Ny asa dia tsy maintsy mamerina zavatra mitovy rafitra. Ny node DOM node dia alefa ho tohan-kevitra faharoa.

Raha mila fanazavana fanampiny dia jereo ny Popper.js's offset docs .
fallbackPlacement string | fihaingoana 'atodiho' Avelao hamaritra hoe toerana inona no hampiasain'i Popper amin'ny fiverenana. Raha mila fanazavana fanampiny dia jereo ny doka momba ny fitondran -tenan'i Popper.js
sisin-tany string | singa 'scrollParent' Ny sisin'ny faneriterena mihoa-pampana amin'ny tendron'ny fitaovana. Manaiky ny sandan'ny 'viewport', 'window', 'scrollParent', na reference HTMLElement (JavaScript ihany). Raha mila fanazavana fanampiny dia jereo ny Popper.js's preventOverflow docs .
manadio boolean marina Alefaso na esory ny fanadiovana. Raha activated 'template'ary ny 'title'safidy dia hodiovina.
whiteList zavatra Sanda default Zavatra misy toetra sy marika navela
manadioFn null | asa tohivakana foana Eto ianao dia afaka manome ny asa fanadiovana anao manokana. Mety ilaina izany raha tianao ny mampiasa tranomboky natokana hanaovana fanadiovana.
popperConfig null | zavatra tohivakana foana Raha hanova ny config Popper.js default an'ny Bootstrap dia jereo ny configuration Popper.js

Toetran'ny data ho an'ny toro-làlana tsirairay

Ny safidy ho an'ny toro-làlana tsirairay dia azo faritana amin'ny alàlan'ny fampiasana ny toetran'ny data, araka ny hazavaina etsy ambony.

fomba

Fomba sy fifindrana asynchronous

Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .

Jereo ny antontan-taratasintsika JavaScript raha mila fanazavana fanampiny .

$().tooltip(options)

Ampifandraiso amin'ny fanangonana singa iray ny mpitantana fitaovana.

.tooltip('show')

Maneho ny tondro-fitaovan'ny singa iray. Miverina any amin'ny mpiantso alohan'ny nanehoana ny tondro-fitaovana (izany hoe alohan'ny shown.bs.tooltipnitrangan'ny hetsika). Ity dia raisina ho toy ny "manual" triggering ny tooltip. Ny toro-hevitra momba ny fitaovana misy lohateny tsy misy halavany dia tsy aseho mihitsy.

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

.tooltip('hide')

Manafina ny tondro-fitaovan'ny singa iray. Miverina any amin'ny mpiantso alohan'ny nafenina ny tondro-fitaovana (izany hoe alohan'ny hidden.bs.tooltipnitrangan'ny hetsika). Ity dia raisina ho toy ny "manual" triggering ny tooltip.

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

.tooltip('toggle')

Manova ny tondro-fitaovan'ny singa iray. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny tondro-fitaovana (izany hoe talohan'ny nitrangan'ny hetsika shown.bs.tooltipna hidden.bs.tooltip). Ity dia raisina ho toy ny "manual" triggering ny tooltip.

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

.tooltip('dispose')

Manafina sy manimba ny tondro-fitaovan'ny singa iray. Ireo toro-lalana izay mampiasa ny delegasiona (izay noforonina amin'ny alalan'ny safidy selector) dia tsy azo ravana tsirairay amin'ny singa trigger.

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

.tooltip('enable')

Manome fahaiza-manaon'ny singa iray mba haseho. Ny toro-làlana dia alefa amin'ny alàlan'ny default.

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

.tooltip('disable')

Esory ny fahafahana aseho amin'ny fanondro fitaovana iray. Ny tondro-fitaovana dia tsy ho hita afa-tsy raha averina alefa.

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

.tooltip('toggleEnabled')

Manova ny fahafahana aseho na afenina ny tohin'ny fitaovana iray.

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

.tooltip('update')

Manavao ny toeran'ny tondro-fitaovana iray.

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

zava-mitranga

Karazana hetsika Description
show.bs.tooltip Mirehitra avy hatrany ity hetsika ity rehefa showantsoina ny fomba fiasa.
shown.bs.tooltip Voaroaka ity hetsika ity rehefa naseho ho hitan'ny mpampiasa ny torolalana momba ny fitaovana (hiandry ny fahavitan'ny fifindrana CSS).
hide.bs.tooltip Ity hetsika ity dia alefa avy hatrany rehefa hidenantsoina ny fomba fiasa.
hidden.bs.tooltip Voaroaka ity hetsika ity rehefa tapitra nafenina tamin'ny mpampiasa ny toro-lalana (hiandry ny famitana ny fifindrana CSS).
inserted.bs.tooltip Ity hetsika ity dia alefa aorian'ny show.bs.tooltiphetsika rehefa nampidirina tao amin'ny DOM ny môdelin'ny tooltip. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})