Gorsa Meeshaalee
Galmee fi fakkeenyota gorsa meeshaalee Bootstrap amala CSS fi JavaScript waliin CSS3 fayyadamuun sochiiwwanii fi deetaa-amaloota kuusaa mata duree naannoodhaaf dabaluudhaaf.
Haala Waliigalaa
Wantoota yeroo tooltip plugin fayyadamtan beekuu qabdan:
- Tooltips ejjennoodhaaf mana kitaabaa qaama 3ffaa Popper irratti hirkatu. Gorsi meeshaa akka hojjetuuf bootstrap.js dura popper.min.js dabaluu qabda ykn
bootstrap.bundle.min.js
/bootstrap.bundle.js
kan Popper of keessaa qabu fayyadamuu qabda! - Yoo JavaScript
util.js
keenya madda irraa ijaaraa jirta ta'e, . - Gorsi meeshaalee sababa raawwii hojiitiin filachuudha, kanaaf ofii keetii jalqabuu qabda .
- Gorsi meeshaa mata dureewwan dheerina zeeroo qaban gonkumaa hin agarsiifaman.
container: 'body'
Qaamolee walxaxaa ta'an keessatti (akka gareewwan galtee keenyaa, gareewwan qaree fi kkf) keessatti rakkoolee agarsiisuu akka hin uumamneef ifteessi .- Qaamolee dhokatan irratti gorsa meeshaa kakaasuun hin hojjetu.
- Gorsi meeshaa
.disabled
ykndisabled
elementoota elementii marfataa irratti kakaafamuu qabu. - Yeroo haayperliinkii sararoota hedduu dabarsan irraa kakaafamu, gorsi meeshaa giddugaleessa ta'a. Amala kana irraa of eeguuf s
white-space: nowrap;
kee irratti fayyadami .<a>
- Gorsi meeshaa osoo elementoonni isaanii walgitan DOM irraa hin haqamin dura dhokachuu qabu.
- Gorsi meeshaa galata elementii DOM golboo keessa jiruun kakaafamuu danda'a.
prefers-reduced-motion
gaaffii miidiyaa irratti hundaa'a. Kutaa sochii hir'ate sanada dhaqqabummaa keenyaa ilaali
.
Sana hunda argatte? Guddaa dha, fakkeenya tokko tokkoon akkamitti akka hojjetan haa ilaallu.
Fakkeenya: Gorsa meeshaalee bakka hundatti dandeessisi
data-toggle
Karaan tokko gorsa meeshaalee hunda fuula tokko irratti jalqabsiisuu amaloota isaaniitiin filachuu ta'a :
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Fakkeenyaaf
Gorsa meeshaalee ilaaluuf hidhannoowwan armaan gadii irratti harka kaa'i:
Barruu iddooqa hidhamtoota sarara keessaa tokko tokko gorsa meeshaa waliin agarsiisuuf. Kun amma filler qofa, nama ajjeesu hin qabu. Qabiyyeen as kaa'ame argama barreeffama dhugaa fakkeessuuf qofa . Kana hunda immoo gorsi meeshaalee yeroo haalawwan addunyaa dhugaa keessatti fayyadaman akkamitti akka fakkaatu yaada siif kennuu qofaaf. Kanaafuu amma gorsi meeshaalee hidhaa irratti argaman kun qabatamaan akkamitti akka hojjechuu danda'an argitan abdii qabna , erga marsariitii ykn pirojektii mataa keessanii irratti fayyadamtanii booda .
Kallattiiwwan gorsa meeshaalee afran: gubbaa, mirgaa, jalaa fi bitaa ilaaluuf qaree armaan gadii irratti harka kaa'i.
<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>
Akkasumas HTML amala dabalamee wajjin:
<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>
Fayyadama
Ijaarsi gorsa meeshaa qabiyyee fi mallattoo gaaffii irratti maddisiisa, akkasumas durtii gorsa meeshaa qaama kaka'umsaa isaanii booda kaa'a.
Gorsa meeshaa karaa JaavaScript kakaasi:
$('#example').tooltip(options)
Overflow auto
fiscroll
Iddoon meeshaa yeroo qabduu warraa keenya qabu overflow: auto
ykn overflow: scroll
jaallatu ofumaan jijjiiruuf yaala .table-responsive
, garuu ammas iddoo iddoo jalqabaa eega. Furuuf, boundary
filannoo gara gatii durtii malee waan biraatti saagi, 'scrollParent'
, kan akka 'window'
:
$('#example').tooltip({ boundary: 'window' })
Markup gochuu
Mallattoon barbaachisu gorsa meeshaa data
amaloota qofa yoo title
ta'u qaama HTML irratti gorsa meeshaa qabaachuu barbaadda. Mallattoon gorsa meeshaa uumame baay'ee salphaadha, haa ta'u malee bakka barbaada (durtiidhaan, ifteessaadhaan saagi top
).
Gorsi meeshaalee fayyadamtoota kiiboordii fi teeknooloojii gargaaraaf akka hojjetu gochuu
Qaamolee HTML kanneen akka aadaa furtuu irratti xiyyeeffachuu danda'anii fi wal-qunnamsiisoo ta'an qofa irratti gorsa meeshaa dabaluu qabda (kan akka hidhannoo ykn too'annoo unkaa). Qaamolee HTML fedhii isaaniitiin (kan akka <span>
s) amallicha dabaluudhaan xiyyeeffannoo akka qabaatan gochuun kan danda'amu ta'us tabindex="0"
, kun fayyadamtoota kiiboordiidhaaf qaamolee wal-qunnamtii hin taane irratti dhaabbii caancalaa nama aarsu fi burjaajessu danda'u ni dabala, fi teeknooloojiiwwan gargaaraa baay'een yeroo ammaa haala kana keessatti gorsa meeshaa hin beeksisan. Dabalataanis, akka kaka'umsa gorsa meeshaa keetii qofatti hin hirkatin hover
, kunis gorsa meeshaa kee fayyadamtoota kiiboordiidhaaf kakaasuun akka hin danda'amne taasisa.
<!-- 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>
Qaamolee hanqifaman
Qaamonni disabled
amaloota qaban wal-qunnamsiisoo miti, jechuun fayyadamtoonni xiyyeeffannoo, hover, ykn cuqaasuun gorsa meeshaa (ykn popover) kakaasuu hin danda'an. Akka furmaataatti, gorsa meeshaa marfata irraa kakaasuu barbaadda <div>
, <span>
akka gaariitti , fayyadamuun kiiboordii-xiyyeeffannoo godhame , fi qaama hanqifame irratti tabindex="0"
irra darbuu barbaadda.pointer-events
<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>
Filannoowwan
Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-
, akkuma keessatti dabali data-animation=""
.
sanitize
,
sanitizeFn
fi
whiteList
amaloota deetaa fayyadamuun dhiyeessuu hin danda'an.
Maqaa | Akaakuu | Durtii dha | Ibsa |
---|---|---|---|
sochii qaamaa (animation). | boolee | dhugaa | Ce'umsa fade CSS gara gorsa meeshaatti hojii irra oolchi |
qabduu | tarree | elementii | soba | soba | Gorsa meeshaa gara qaama murtaa'etti dabalata. Fakkeenyaaf: |
boodatti hafuu | lakkoofsa | meeshaa | 0. | Gorsa meeshaa agarsiisuu fi dhoksuu harkifachuu (ms) - gosa kaka'umsa harkaa irratti hin hojjetu Yoo lakkoofsi kenname, harkifannaa dhoksuu/agarsiisi lamaan irratti hojii irra oola Caasaan wantaa: 1.1. |
html | boolee | soba | HTML gorsa meeshaa keessatti hayyami. Yoo dhugaa ta'e, mallattoolee HTML kanneen tooltip's Yoo waa'ee haleellaa XSS si yaaddesse barreeffama fayyadami. |
ramaddii | tarree | faayidaa | 'gubbaa' | Akkaataa tooltip itti dhaabdan - auto | gubbaa | jalaa | bitaa | sirrii. Faankishiniin tokko iddoo murteessuuf yeroo fayyadamu, akka murfii isaa isa jalqabaatti noodiin DOM fiixee meeshaa fi noodiin DOM elementii kakaasu akka isa lammaffaatti waamama. Qabduun |
filannoodha | tarree | soba | soba | Yoo filataan kenname, wantoonni gorsa meeshaa galmoota ifteessamaniif ni kennamu. Qabatamaan, kun akkasumas gorsa meeshaalee elementoota DOM daayinamiikiin dabalaman irratti hojii irra oolchuuf fayyadama ( jQuery.on deeggarsa). Kanaa fi fakkeenya odeeffannoo qabu ilaalaa . |
unkaa | hidhaa | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
HTML yeroo gorsa meeshaa uumtu fayyadamuuf bu'uura. Tooltip's
Qaamni marfataa alaa |
mata-duree | tarree | elementii | faayidaa | '' . | Gatii mata duree durtii yoo Yoo faankishiniin kenname, |
dammaqsuu | hidhaa | 'xiyyeeffannoo hover' jedhu. | Akkaataa tooltip itti kakaafamu - | cuqaasi hover | xiyyeeffannoo | kan harkaanii. Kaka’umsa hedduu darbuu dandeessa; bakka adda baasuun addaan baasuu.
|
ofseeti jechuun ni danda’ama | lakkoofsa | tarree | faayidaa | 0. | Ofseeti gorsa meeshaa galma isaa wajjin walqabatee. Faankishiniin tokko ofseeti murteessuuf yeroo fayyadamu, wanta deetaa ofseeti akka murfii isaa isa jalqabaatti of keessaa qabuun waamama. Faankishinichi wanta caasaa walfakkaataa qabu deebisuu qaba. Qaamni kakaasu DOM noodiin akka falmii lammaffaatti darba. Odeeffannoo dabalataaf Popper's offset docs ilaali . |
fallbackIddoo kaa'uu | tarree | tarree | 'garagalchuu' | Popper fallback irratti ejjennoo kam akka fayyadamu ibsuuf hayyami. Odeeffannoo dabalataaf docs amala Popper ilaali |
CustomClass jedhamuun beekama | tarree | faayidaa | '' . | Yeroo agarsiifamu gitawwan gara gorsa meeshaatti dabali. Hubadhu, gitawwan kun gitawwan kamiyyuu unkaa keessatti ifteessaman irratti dabalataan akka dabalaman. Gitoota hedduu dabaluudhaaf, iddoowwan addaan baafadhu: Akkasumas faankishinii tarree tokko maqaa gita dabalataa of keessaa qabu deebisuu qabu dabarsuu dandeessa. |
daangaa | tarree | qabiyyee | 'Warra garagalchuu'. | Daangaa danqaa dhangala'aa gorsa meeshaa. Gatii 'viewport' , 'window' , 'scrollParent' , ykn wabii HTMLElement fudhata (JavaScript qofa). Odeeffannoo dabalataaf galmeewwan PreventOverflow Popper ilaali . |
sanitize gochuu | boolee | dhugaa | Sanitization dandeessisi ykn hanqisi. Yoo activated 'template' ta'ee fi 'title' filannoowwan sanitized ta'u. Kutaa saanitaayizarii galmee JaavaScript keenya keessatti ilaali . |
Tarree adii | meeshaa | Gatii durtii | Wanti amaloota fi mallattoolee hayyamaman of keessaa qabu |
qulqulleessuuFn | null | faayidaa | duwwaa | Asirratti sanitize function mataa keessanii dhiyeessuu dandeessu. Kun faayidaa qabaachuu danda’a yoo mana kitaabaa addaa fayyadamuun qulqulleessuu raawwachuu barbaadde. |
popperQindeessaa | null | meeshaa | duwwaa | Qindaa'ina Popper durtii Bootstrap jijjiiruuf, qindeessaa Popper ilaali |
Amaloota deetaa gorsa meeshaalee dhuunfaaf
Filannoon gorsa meeshaalee dhuunfaa filannoodhaan karaa fayyadama amaloota deetaa ifteessuun ni danda'ama, akkuma armaan olitti ibsame.
Malawwan
Malawwanii fi ce’umsawwan wal hin simne
Malleen API hundi wal hin simnee fi ce'umsa jalqabu . Akkuma ce'umsi jalqabame garuu osoo hin xumuramin gara nama bilbileetti deebi'u . Dabalataan, waamichi malaa qaama ce'umsaa irratti ni tuffatama .
$().tooltip(options)
Qabduu gorsa meeshaa walitti qabama elementii irratti maxxansi.
.tooltip('show')
Gorsa meeshaa elementii tokkoo mul'isa. Osoo gorsi meeshaa qabatamaan hin agarsiifamiin dura gara waamichaatti deebi'a (jechuunis osoo shown.bs.tooltip
taatee hin uumamin dura). Kunis akka “harkaan” kakaasuu tooltip ta’ee fudhatama. Gorsi meeshaa mata dureewwan dheerina zeeroo qaban gonkumaa hin agarsiifaman.
$('#element').tooltip('show')
.tooltip('hide')
Gorsa meeshaa elementii dhoksa. Osoo gorsi meeshaa qabatamaan hin dhokatiin (jechuun osoo taatee hin uumamin dura) gara waamichaatti deebi'a . hidden.bs.tooltip
Kunis akka “harkaan” kakaasuu tooltip ta’ee fudhatama.
$('#element').tooltip('hide')
.tooltip('toggle')
Gorsa meeshaa qaama tokkoo jijjiira. Gara waamichaatti deebi'a osoo gorsi meeshaa qabatamaan hin agarsiifamin ykn hin dhokatiin (jechuunis osoo taatee shown.bs.tooltip
ykn hin uumamin dura hidden.bs.tooltip
). Kunis akka “harkaan” kakaasuu tooltip ta’ee fudhatama.
$('#element').tooltip('toggle')
.tooltip('dispose')
Gorsa meeshaa elementii tokkoo dhoksuu fi balleessa. Gorsi meeshaalee bakka bu'iinsa fayyadaman ( kanneen selector
filannoo fayyadamuun uumaman ) qaamolee kaka'umsaa sanyii irratti dhuunfaan balleessuu hin danda'an.
$('#element').tooltip('dispose')
.tooltip('enable')
Dandeettii agarsiisuuf tooltip elementii kenna. Gorsi meeshaalee durtiidhan dandeessifama.
$('#element').tooltip('enable')
.tooltip('disable')
Dandeettii gorsa meeshaa elementii agarsiisuuf haqa. Gorsi meeshaa agarsiisuu kan danda'u yoo irra deebi'amee dandeessifame qofa.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Dandeettii gorsa meeshaa elementii akka agarsiifamu ykn dhokfamuuf jijjiira.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Bakka gorsa meeshaa qaama tokkoo fooyyessa.
$('#element').tooltip('update')
Taateewwan
Gosa Taatee | Ibsa |
---|---|
gorsa meeshaa agarsiisu.bs | Taatee kun yeroo show mala fakkeenyaa waamamu battalumatti dhukaasa. |
agarsiifame.bs.tooltip | Taatee kun yeroo gorsi meeshaa fayyadamaaf mul'atu taasifamu ni ari'ama (ce'umsa CSS xumuramu ni eega). |
gorsa meeshaa dhoksi.bs | Taatee kun yeroo hide mala fakkeenyaa waamame battalumatti dhukaafama. |
dhokataa.bs.meeshaa | Taatee kun yeroo gorsi meeshaa fayyadamaa irraa dhokfamuu xumuru ni ari'ama (ce'umsa CSS xumuramuu eega). |
gorsa meeshaa.bs.galfame | Taatee kun taatee booda show.bs.tooltip yeroo unkaan gorsa meeshaa DOM irratti dabalame ari'ama. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})