Tooltips
Belgekirin û mînakên ji bo lê zêdekirina şîretên Bootstrap-ê yên xwerû yên bi CSS û JavaScript-ê bi karanîna CSS3 ji bo anîmasyon û dane-bs-taybetmendiyên ji bo hilanîna sernavê herêmî.
Têgihiştinî
Tiştên ku divê hûn zanibin dema ku pêveka tooltip bikar tînin:
- Serişteyên amûran ji bo pozîsyonê xwe dispêrin pirtûkxaneya partiya sêyemîn Popper . Divê hûn berî bootstrap.js -ê popper.min.js-ê têxin
bootstrap.bundle.min.js
nav xwe an jî /bootstrap.bundle.js
ya ku Popper dihewîne bikar bînin da ku şîretên amûran bixebitin! - Serişteyên amûran ji ber sedemên performansê têne hilbijartin, ji ber vê yekê divê hûn bi xwe wan dest pê bikin .
- Sernavên amûran ên bi sernavên zero-dirêj qet nayên xuyang kirin.
- Diyar
container: 'body'
bikin ku hûn di hêmanên tevlihevtir de (mîna komên têketina me, komên bişkokê, hwd) pirsgirêkan çênekin. - Teqandina şîretên amûran li ser hêmanên veşartî dê nexebite.
- Pêdivî ye ku şîretên amûran ji bo
.disabled
andisabled
hêmanan li ser hêmanek pêçandî werin xebitandin. - Dema ku ji hyperlînkên ku pir rêzan vedigirin, şîretên amûran dê bêne navend kirin.
white-space: nowrap;
Li ser s-ya xwe bikar bînin<a>
ku ji vê tevgerê dûr bixin. - Berî ku hêmanên wan ên têkildar ji DOM-ê werin rakirin divê şîretên amûran werin veşartin.
- Serişteyên amûran dikarin bi saya hêmanek di hundurê DOM-a siya de werin desteser kirin.
prefers-reduced-motion
medyayê ve girêdayî ye. Binêre
beşa tevgera kêmkirî ya belgeya gihîştina me .
Hemî got? Baş e, em bibînin ka ew bi çend mînakan çawa dixebitin.
Mînak: Serişteyên amûran li her derê çalak bikin
Yek rê ji bo destpêkirina hemî serişteyên amûran li ser rûpelek dê ev be ku hûn wan li gorî taybetmendiya xwe data-bs-toggle
hilbijêrin:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Examples
Li ser zencîreyên jêrîn bihêlin ku hûn serişteyên amûran bibînin:
Nivîsara cîhê ku hin girêdanên hundurîn bi şîretên amûran re nîşan bide. Ev naha tenê dagirtî ye, ne kujer e. Naveroka ku li vir hatî danîn tenê ji bo ku hebûna nivîsa rastîn teqlîd bike. Û hemî ew tenê ji bo ku hûn ramanek bidin we ka dê çawa şîretên amûran di rewşên cîhana rastîn de werin bikar anîn. Ji ber vê yekê hêvîdarim ku we naha dîtiye ka van serişteyên li ser girêdanan çawa dikarin di pratîkê de bixebitin, gava ku hûn wan li ser malper an projeya xwe bikar bînin.
Li ser bişkokên li jêr bigerin da ku çar rêwerzên amûran bibînin: jor, rast, jêr û çep. Dema ku Bootstrap-ê di RTL-ê de bikar tînin rêwerz têne xuyang kirin.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Û bi HTML-ya xwerû lê zêde kirin:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Bi SVG:
Sass
Variables
$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $black;
$tooltip-border-radius: $border-radius;
$tooltip-opacity: .9;
$tooltip-padding-y: $spacer * .25;
$tooltip-padding-x: $spacer * .5;
$tooltip-margin: 0;
$tooltip-arrow-width: .8rem;
$tooltip-arrow-height: .4rem;
$tooltip-arrow-color: $tooltip-bg;
Bikaranîna
Pêveka tooltip li gorî daxwazê naverok û nîşankirinê çêdike, û ji hêla xwerû ve şîretên amûran li dû hêmana wan a tîrêjê bi cîh dike.
Serişteya amûrê bi JavaScriptê vekin:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Overflow auto
ûscroll
Dema ku konteynirek dêûbav hebe overflow: auto
an overflow: scroll
wekî me hebe, pozîsyona şîreta amûrê hewl dide ku bixweber biguhezîne .table-responsive
, lê dîsa jî pozîsyona cîhê orjînal diparêze. Ji bo çareserkirina vê, boundary
vebijarkê (ji bo guhezkera flip ku popperConfig
vebijarkê bikar tîne) li ser her HTMLElementê bicîh bikin ku nirxa xwerû, 'clippingParents'
, wek document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Markup
Nîşana pêdivî ya ji bo serişteyek amûrek tenê data
taybetmendiyek e û title
li ser hêmana HTML-ê hûn dixwazin şîreta amûrekê hebe. Nîşana hilberandî ya amûrek pir hêsan e, her çend ew pozîsyonek hewce dike (ji hêla xwerû, ji top
hêla pêvekê ve hatî saz kirin).
Çêkirina şîretên amûran ji bo bikarhênerên klavyeyê û teknolojiya arîkar dixebitin
Pêdivî ye ku hûn tenê şîretên amûran li hêmanên HTML-ê ku bi kevneşopî li ser klavyeyê ve girêdayî ne û înteraktîf in (wek girêdan an kontrolên formê) zêde bikin. Her çend hêmanên HTML-ê yên keyfî (wek <span>
s) dikarin bi lêzêdekirina tabindex="0"
taybetmendiyê bêne balkişandin, ev ê ji bo bikarhênerên klavyeyê rawestgehên tabloyên potansiyel acizker û tevlihev li ser hêmanên ne-înteraktîf zêde bike, û piraniya teknolojiyên arîkar naha di vê rewşê de şîreta amûrê ragihînin. Digel vê yekê, tenê xwe nespêrin hover
wekî teşqela şîreta amûra xwe, ji ber ku ev ê nekaribe şîretên amûra we ji bo bikarhênerên klavyeyê vebike.
<!-- HTML to write -->
<a href="#" data-bs-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="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
hêmanên astengdar
Hêmanên bi disabled
taybetmendiyê ne înteraktîf in, tê vê wateyê ku bikarhêner nikanin balê bikşînin, hildin, an li wan bikirtînin da ku amûrek (an popover) bişopînin. Wekî çareseriyek, hûn ê bixwazin ku şîreta amûrê ji pêçanek <div>
an jî <span>
, ku bi îdeal e ku bi karanîna klavyeyê-focusable hatî çêkirin, derxînin tabindex="0"
.
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
Vebijêrk
Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-bs-
, wekî di data-bs-animation=""
. Dema ku vebijarkan bi taybetmendiyên daneyê re derbas dikin, pê ewle bin ku celebê doza navê vebijarkê ji camelCase biguhezînin kebab-case. Mînakî, li şûna ku bikar bînin data-bs-customClass="beautifier"
, bikar bînin data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, û
allowList
bi karanîna taybetmendiyên daneyê nayên peyda kirin.
Nav | Awa | Destçûnî | Terîf |
---|---|---|---|
animation |
boolean | true |
Veguheztinek fade ya CSS-ê li ser amûrê bicîh bikin |
container |
string | element | şaş | false |
Serişteya amûrê li hêmanek taybetî vedike. Mînak |
delay |
hejmar | tişt | 0 |
Dereng nîşankirin û veşartina şîreta amûrê (ms) - ji bo celebê destana destan nayê sepandin Ger jimarek were peyda kirin, dereng hem ji bo veşêrin/nîşandanê tê sepandin Struktura objektê ev e: |
html |
boolean | false |
Destûrê bide HTML-ê di şîreta amûrê de. Ger rast be, etîketên HTML-ê yên di şîreta amûrê de Heke hûn ji êrîşên XSS-ê ditirsin, nivîsê bikar bînin. |
placement |
string | karî | 'top' |
Meriv çawa şîreta amûrê bi cih dike - otomatîk | top | binê | çep | rast. Dema ku fonksiyonek ji bo destnîşankirina cîhê tê bikar anîn, ew bi girêka amûrê DOM-ê wekî argumana wê ya yekem û hêmana vekêşanê wekî girêka DOM-ê wekî duyemîn tê gotin. Têkilî |
selector |
string | şaş | false |
Ger hilbijarkek were peyda kirin, dê tiştên şîreta amûrê ji armancên diyarkirî re werin şandin. Di pratîkê de, ev tê bikar anîn da ku serişteyên amûrê li ser hêmanên DOM-ê yên dînamîkî yên zêdekirî ( jQuery.on piştgirî) jî bicîh bikin. Vê û mînakek agahdar bibînin . |
template |
ben | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Bingeha HTML-ê ji bo ku dema çêkirina şîreta amûrê bikar bîne. The tooltip's
Divê hêmana wrapperê ya herî derveyî |
title |
string | element | karî | '' |
Ger fonksiyonek were dayîn, ew ê bi |
trigger |
ben | 'hover focus' |
Çawa tooltip tê derxistin - bikirtînin | hover | fokus | destî. Hûn dikarin gelek teşqeleyan derbas bikin; wan bi cihekî veqetînin.
|
fallbackPlacements |
rêzî | ['top', 'right', 'bottom', 'left'] |
Bi peydakirina navnîşek cîhên di rêzê de (li gorî rêza bijare) cîhên paşverû diyar bikin. Ji bo bêtir agahdarî serî li belgeyên tevgerê yên Popper bidin |
boundary |
string | pêve | 'clippingParents' |
Sînorê astengiya Overflow ya şîreta amûrê (tenê ji bo guhezkera preventOverflow ya Popper derbas dibe). Bi xwerû ew e 'clippingParents' û dikare referansek HTMLElement (tenê bi JavaScriptê) qebûl bike. Ji bo bêtir agahdarî serî li belgeyên detectOverflow yên Popper bidin . |
customClass |
string | karî | '' |
Dema ku ew tê xuyang kirin çînên li ser tooltip zêde bikin. Bala xwe bidinê ku ev ders dê ji bilî dersên ku di şablonê de hatine destnîşan kirin werin zêdekirin. Ji bo zêdekirina çînên pirjimar, wan bi cihan veqetînin Her weha hûn dikarin fonksiyonek derbas bikin ku divê rêzek yekane ya ku navên pola zêde vedihewîne vegerîne. |
sanitize |
boolean | true |
Paqijkirinê çalak bikin an neçalak bikin. Ger were çalak kirin 'template' û 'title' vebijark dê bêne paqij kirin. Di belgeya meya JavaScriptê de beşa paqijkerê bibînin . |
allowList |
tişt | Nirxa standard | Tişta ku taybetmendî û etîketên destûr dihewîne |
sanitizeFn |
null | karî | null |
Li vir hûn dikarin fonksiyona xweya paqijkirinê peyda bikin. Heke hûn tercîh dikin ku pirtûkxaneyek taybetî bikar bînin ku paqijkirinê bikin ev dikare kêrhatî be. |
offset |
array | string | karî | [0, 0] |
Veguheztina amûrê li gorî armanca xwe. Hûn dikarin rêzek di taybetmendiyên daneyê de bi nirxên veqetandî yên wek: Dema ku fonksiyonek ji bo destnîşankirina offset tê bikar anîn, ew bi tiştek ku cîhê popper, referans, û rekteyên popper wekî argumana wê ya yekem vedihewîne tê gotin. Hêmana destkêşanê ya DOM-ê wekî argumana duyemîn derbas dibe. Fonksiyon divê arrayek bi du hejmaran vegerîne: . Ji bo bêtir agahdarî serî li belgeyên offset ên Popper bidin . |
popperConfig |
null | object | karî | null |
Ji bo guherandina veavakirina Popperê ya xwerû ya Bootstrap, li veavakirina Popper binêre . Dema ku fonksiyonek ji bo afirandina veavakirina Popper tê bikar anîn, ew bi hêmanek ku veavakirina Popper-a xwerû ya Bootstrap-ê vedihewîne tê gotin. Ew ji we re dibe alîkar ku hûn xwerû bi veavakirina xwe re bikar bînin û hev bikin. Pêdivî ye ku fonksiyon ji bo Popper tiştek veavakirinê vegerîne. |
Taybetmendiyên daneyê ji bo serişteyên amûran ên kesane
Vebijarkên ji bo serişteyên amûran ên takekesî dikarin bi karanîna taybetmendiyên daneyê, wekî ku li jor hatî ravekirin, bi alternatîf werin destnîşan kirin.
Bikaranîna fonksiyonê bipopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Methods
Rêbaz û veguherînên Asynchronous
Hemî rêbazên API-ê asynkron in û veguherînek dest pê dikin . Gava ku veguhêz dest pê kir lê berî ku biqede ew vedigerin bangkerê . Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.
rêdan
Tîpa amûrek hêmanek eşkere dike. Berî ku şîreta amûrê bi rastî were xuyang kirin (ango berî ku shown.bs.tooltip
bûyer çêbibe) vedigere bangewazî. Ev wekî "bi destan" vekêşana amûrê tê hesibandin. Sernavên amûran ên bi sernavên zero-dirêj qet nayên xuyang kirin.
tooltip.show()
veşartin
Tîpa amûrekê vedişêre. Berî ku şîreta amûrê bi rastî veşêre (ango berî ku hidden.bs.tooltip
bûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana amûrê tê hesibandin.
tooltip.hide()
toggle
Destûra amûrek hêmanek vedike. Berî ku şîreta amûrê bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.tooltip
an hidden.bs.tooltip
bûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana amûrê tê hesibandin.
tooltip.toggle()
avêtin
Tîpa amûrekê vedişêre û hilweşîne (Daneyên hilanîn ên li ser hêmana DOM-ê radike). Pêşniyarên amûran ên ku delegasyonê bikar tînin (yên ku bi vebijarkê têne afirandin ) selector
nekarin bi rengekî ferdî li ser hêmanên nifûsê werin hilweşandin.
tooltip.dispose()
bikêrkirin
Kapasîteya nîşankirinê dide şîreta amûrek elementek. Pêşniyarên amûran ji hêla xwerû ve têne çalak kirin.
tooltip.enable()
neçalak bike
Kapasîteya nîşankirina amûrek hêmanek jê dike. Serişteya amûrê tenê heke ji nû ve were çalak kirin dê bikaribe were xuyang kirin.
tooltip.disable()
toggleEnabled
Kapasîteya nîşankirina an veşartina amûrek hêmanek vedigire.
tooltip.toggleEnabled()
update
Pozîsyona amûrek hêmanek nûve dike.
tooltip.update()
getInstance
Rêbaza statîk a ku dihêle hûn mînakek amûrek bi hêmanek DOM-ê ve girêdayî bistînin
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
getOrCreateInstance
Rêbaza statîkî ya ku dihêle hûn mînakek amûrek ku bi hêmanek DOM-ê ve girêdayî ye bistînin, an heke ew nehatibe destpêkirin yek nû biafirînin.
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Events
Cureyê bûyerê | Terîf |
---|---|
show.bs.tooltip |
show Dema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite. |
shown.bs.tooltip |
Dema ku şîreta amûrê ji bikarhênerê re xuya bibe ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS temam bibin). |
hide.bs.tooltip |
hide Dema ku rêbaza nimûneyê hate gazîkirin , ev bûyer tavilê tê şewitandin . |
hidden.bs.tooltip |
Dema ku şîreta amûrê ji bikarhênerê veşartî qediya ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS temam bibin). |
inserted.bs.tooltip |
Ev bûyer piştî show.bs.tooltip bûyera dema ku şablonê tooltip li DOM-ê hate zêdekirin tê şewitandin. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()