in English

Tooltips

Belgekirin û nimûneyê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 û taybetmendiyên daneyê 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!
  • Heke hûn JavaScript-a me ji çavkaniyê ava dikin, ew hewce dikeutil.js .
  • 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-togglehilbijêrin:

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

Examples

Li ser zencîreyên jêrîn bigerin da ku 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 niha tenê dagirtin e, ne kujer e. Naveroka ku li vir hatî danîn tenê ji bo ku hebûna nivîsa rastîn teqlîd bike. Û ew hemî tenê ji bo ku hûn ramanek bidin ka 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.

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

Û bi HTML-ya xwerû lê zêde kirin:

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

Bikaranîna

Pêveka tooltip li gorî daxwazê ​​naverok û nîşankirinê diafirîne, û ji hêla xwerû ve şîretên amûran li dû hêmana wan a destkêşanê bi cih dike.

Bi JavaScriptê şîreta amûrê bişopînin:

$('#example').tooltip(options)
Zêdebûn autoûscroll

overflow: autoDema ku konteynirek dêûbav hebe an overflow: scrollwekî me hebe, pozîsyona şîreta amûrê hewl dide ku bixweber biguheze .table-responsive, lê dîsa jî pozîsyona cîhê orjînal diparêze. Ji bo çareserkirinê, boundaryvebijarkê ji bilî nirxa xwerû, vebijarkê saz bikin 'scrollParent', wek 'window':

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

Markup

Nîşana pêdivî ya ji bo serişteyek amûrek tenê datataybetmendiyek e û titleli ser hêmana HTML-ê ku hûn dixwazin 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-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>

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 jî popover) bişopînin. Wekî çareseriyek, hûn ê bixwazin ku şîreta amûrê ji pêçanek <div>an <span>, ku bi îdeal e ku bi karanîna klavyeyê-focusable hatî çêkirin vekin tabindex="0", û pointer-eventsli ser hêmana neçalak bişopînin.

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

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-, wekî di data-animation="".

Bala xwe bidinê ku ji ber sedemên ewlehiyê vebijarkên sanitize, sanitizeFnû whiteListbi karanîna taybetmendiyên daneyê nayên peyda kirin.
Nav Awa Destçûnî Terîf
jayandarî boolean rast Veguheztinek fade ya CSS-ê li ser amûrê bicîh bikin
têrr string | element | şaş şaş

Sernavê amûrê bi hêmanek taybetî ve dike. 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êzî hêmana destkêş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.
derengxistin hejmar | tişt 0

Dereng xuyangkirin û veşartina şîreta amûrê (ms) - ji bo celebê destkêşana destan derbas nabe

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

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, textdê rêbaza jQuery were bikar anîn da ku naverokê têxe nav DOM-ê.

Heke hûn ji êrîşên XSS-ê bi fikar in, nivîsê bikar bînin.
danîn string | karî 'lûtik'

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 û bi hêmana vekêşanê girê DOM-ê wekî duyemîn tê gotin. Têkilî thisli ser mînaka tooltip tête danîn.
hilbijêr string | şaş şaş 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 .
şablon ben '<div class="tooltip" role="tooltip"><div class="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.

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

Divê hêmana wrapperê ya herî derveyî .tooltippola û role="tooltip".
nav 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.
kişok ben 'fokusa lêveger'

Ç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 .tooltip('show'), .tooltip('hide')û .tooltip('toggle')rêbazan ve were xebitandin; ev nirx nikare bi ti kêşek din re were hev kirin.

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

Veguheztina amûrê li gorî armanca xwe.

Dema ku fonksiyonek ji bo destnîşankirina guheztinê tê bikar anîn, ew wekî argumana wê ya yekem bi objeyek ku daneya offset vedihewîne tê gotin. Pêdivî ye ku fonksiyonek bi heman avahiyê vegerîne. Hêmana destkêşanê ya DOM-ê wekî argumana duyemîn derbas dibe.

Ji bo bêtir agahdarî serî li belgeyên offset yên Popper bidin .
fallbackPlacement string | rêzî 'flip' Destûrê bide ku diyar bike ka Popper dê kîjan pozîsyonê di paşvekişînê de bikar bîne. Ji bo bêtir agahdarî serî li belgeyên tevgerê 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 'a b':.

Her weha hûn dikarin fonksiyonek derbas bikin ku divê rêzek yekane ya ku navên pola zêde vedihewîne vegerîne.
tixûb string | pêve 'scrollParent' Sînorê astengiya serpêhatiyê ya serşûştinê. Nirxên 'viewport', 'window', 'scrollParent', an referansek HTMLElement (tenê JavaScript) qebûl dike. Ji bo bêtir agahdarî serî li belgeyên preventOverflow yên Popper bidin .
sanitize boolean rast 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 .
whiteList tişt Nirxa standard Tişta ku taybetmendî û tagê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.
popperConfig null | tişt null Ji bo guherandina veavakirina Popperê ya xwerû ya Bootstrap, li veavakirina Popper binêre

Taybetmendiyên daneyê ji bo serişteyên amûran ên kesane

Vebijarkên ji bo serişteyên amûrê yên takekesî dikarin bi karanîna taybetmendiyên daneyê, wekî ku li jor hatî ravekirin, bi alternatîfî werin destnîşan kirin.

Methods

Rêbaz û veguherînên asynchronous

Hemî rêbazên API-ê asînkron 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 .

$().tooltip(options)

Pêşkêşkarek amûrek bi berhevokek elementê ve girêdide.

.tooltip('show')

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.

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

.tooltip('hide')

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.

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

.tooltip('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.

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

.tooltip('dispose')

Tîpa amûrekê vedişêre û hilweşîne. 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.

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

.tooltip('enable')

Kapasîteya nîşankirinê dide şîreta amûrek elementek. Pêşniyarên amûran ji hêla xwerû ve têne çalak kirin.

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

.tooltip('disable')

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.

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

.tooltip('toggleEnabled')

Kapasîteya nîşankirina an veşartina amûrek hêmanek vedigire.

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

.tooltip('update')

Pozîsyona amûrek hêmanek nûve dike.

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

Events

Cureyê bûyerê Terîf
nîşan bide.bs.tooltip showDema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite.
nîşan dan.bs.tooltip Dema ku şîreta amûrê ji bikarhênerê re xuya bû ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS temam bibin).
veşêre.bs.tooltip hideDema ku rêbaza nimûneyê hate gazîkirin , ev bûyer tavilê tê şewitandin .
veşartî.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).
xistin.bs.tooltip Ev bûyer piştî show.bs.tooltipbûyera dema ku şablonê tooltip li DOM-ê hate zêdekirin tê şewitandin. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})