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 fahatelo Popper 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.js
izay misy Popper mba hahafahan'ny toro-hevitra miasa! - Raha manorina ny JavaScript avy amin'ny loharano ianao dia mitaky
util.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
.disabled
na nydisabled
singa 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.
prefers-reduced-motion
fangatahan'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-toggle
toetrany:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
OHATRA
Mitsangàna eo amin'ny rohy etsy ambany raha te hahita fitaovana:
Lahatsoratra toeran'ny toerana hanehoana rohy an-tsipika miaraka amin'ny toro-hevitra. Famenoana fotsiny izao, tsy misy mpamono olona. Ny votoaty napetraka eto mba haka tahaka ny fisian'ny lahatsoratra tena izy . Ary izany rehetra izany dia hanome anao hevitra fotsiny momba ny fomba fijerin'ny fitaovana rehefa ampiasaina amin'ny toe-javatra tena izy. Ka antenaina fa efa hitanao izao ny fomba fiasan'ireo toro-hevitra momba ny rohy ireo amin'ny fampiharana, rehefa mampiasa azy ireo amin'ny tranokalanao na tetikasanao ianao.
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 auto
aryscroll
Ny toeran'ny Tooltip dia manandrana miova ho azy rehefa manana overflow: auto
na overflow: scroll
tia anay ny fitoeran'ny ray aman-dreny .table-responsive
, saingy mbola mitazona ny toeran'ny toerana voalohany. Mba hamahana izany dia apetraho amin'ny boundary
zavatra hafa ankoatra ny sanda default 'scrollParent'
, toy ny 'window'
:
$('#example').tooltip({ boundary: 'window' })
fanamarihana
Ny mari-pamantarana ilaina ho an'ny tondro-fitaovana dia data
toetra iray ihany ary title
amin'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 top
ny 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 hover
maha-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 disabled
toetra 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-events
ao 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=""
.
sanitize
,
sanitizeFn
sy
ny whiteList
safidy 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: |
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: |
html | boolean | DISO | Avelao ao amin'ny tondro-fitaovana ny HTML.
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 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 |
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.on fanohanana) 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
Ny singa wrapper ivelany indrindra dia tokony hanana ny |
lohateny | string | singa | asa | '' | Sanda titre default raha Raha misy asa omena, dia hantsoina miaraka amin'ny |
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.
|
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 doka offset an'i Popper . |
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 |
customClass | string | asa | '' | Ampio kilasy amin'ny tondro-fitaovana rehefa aseho izany. Mariho fa ampiana ireo kilasy ireo ho fanampin'ny kilasy voalaza ao amin'ny môdely. Mba hanampiana kilasy maromaro, saraho amin'ny habaka: Azonao atao ihany koa ny mandefa asa iray izay tokony hamerina tady tokana misy anarana kilasy fanampiny. |
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's preventOverflow docs . |
manadio | boolean | marina | Alefaso na esory ny fanadiovana. Raha activated 'template' ary ny 'title' safidy dia hodiovina. Jereo ny fizarana sanitizer ao amin'ny antontan-taratasy JavaScript . |
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 default an'ny Bootstrap dia jereo ny configuration Popper |
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.tooltip
nitrangan'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.tooltip
nitrangan'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.tooltip
na 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 show antsoina 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 hide nantsoina 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.tooltip hetsika rehefa nampidirina tao amin'ny DOM ny môdelin'ny tooltip. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})