Biçe ser naveroka sereke Biçe navîgasyon belgeyan
in English

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êxinbootstrap.bundle.min.js nav xwe an jî / bootstrap.bundle.jsya 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 .disabledan disabledhê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.
Ji hêla xwerû ve, ev hêman paqijkera naverokê ya çêkirî bikar tîne, ku her hêmanên HTML-ê yên ku bi eşkere destûr nedaye ji holê radike. Ji bo bêtir agahdarî, beşa paqijkerê di belgeya meya JavaScript de bibînin.
Bandora anîmasyonê ya vê hêmanê bi pirsa prefers-reduced-motionmedyayê 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-togglehilbijê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: autoan overflow: scrollwekî 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ê, boundaryvebijarkê (ji bo guhezkera flip ku popperConfigvebijarkê 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ê datataybetmendiyek e û titleli 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 tophê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 hoverwekî 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 disabledtaybetmendiyê 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".

Bala xwe bidinê ku ji ber sedemên ewlehiyê vebijarkên sanitize, sanitizeFn, û allowListbi 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 container: 'body':. Ev vebijark bi taybetî bikêrhatî ye ku ew dihêle hûn şîreta amûrê di herikîna belgeyê de li nêzikî hêmana vekêşanê bi cih bikin - ku dê rê li ber ku şîreta amûrê di dema mezinbûna pencereyê de ji hêmana vekêşanê dûr nekeve.

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:delay: { "show": 500, "hide": 100 }

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 titledê di şîreta amûrê de werin pêşkêş kirin. Ger xelet be, innerTextdê milk were bikar anîn da ku naverokê têxe DOM-ê.

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 autoku were destnîşan kirin, ew ê bi dînamîk veguhezîne serişteya amûrê.

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î thisji bo nimûneya tooltip tête danîn.

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.onpiş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 titledê di nav de were derzî kirin .tooltip-inner.

.tooltip-arrowdê bibe tîra amûrê.

Divê hêmana wrapperê ya herî derveyî .tooltippola û role="tooltip".

title string | element | karî ''

titleGer taybetmendî tune be nirxa sernavê ya xwerû.

Ger fonksiyonek were dayîn, ew ê bi thiskoma referansa xwe re ji hêmana ku pêveka amûrê pê ve girêdayî ye were gazî kirin.

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.

'manual'destnîşan dike ku şîreta amûrê dê bi bernameyî bi riya .show(), .hide()û .toggle()rêbazan ve were xebitandin; ev nirx nikare bi ti kêşek din re were hev kirin.

'hover'bi tena serê xwe dê şîretên amûran çêbike ku nikaribin bi rêya klavyeyê ve werin xebitandin, û divê tenê heke rêbazên alternatîf ji bo gihandina heman agahiyê ji bo bikarhênerên klavyeyê hebin were bikar anîn.

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 'class-1 class-2':.

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:data-bs-offset="10,20"

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: .[skidding, distance]

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.

Ji bo bêtir agahdarî li belgeya meya JavaScriptê binêre .

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.tooltipbû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.tooltipbû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.tooltipan hidden.bs.tooltipbû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 ) selectornekarin 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 showDema 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 hideDema 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.tooltipbû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()