Source

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.js . Divê hûn berî bootstrap.js -ê popper.min.js-bootstrap.bundle.min.js ê vehewînin an jî bikar bînin / bootstrap.bundle.jsya ku Popper.js dihewîne 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.

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 bihêlin ku hûn serişteyên amûran bibînin:

Pantorên teng ên asta din keffiyeh dibe ku we ji wan nebihîstiye. Bûka wêneyan rîh denim raw letterpress vegan qasid bag stumptown. Cil û bergên Amerîkî yên 8-bit quinoa domdar a mcsweeney ji çandiniyê-to-maseyê, xwedan şamek vinyl a terry richardson e. Stûpê rîh, kardigan banh mi lomo birûskên. Tofu biodiesel williamsburg marfa, çar loko mcsweeney's chambray vegan paqij dike. A artisan bi rastî îronîk çi keytar , dîmendera farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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ê çê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:

$('#example').tooltip(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 ç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-ê 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ê li ser hêmanên ne-înteraktîf tabloyên potansiyel acizker û tevlihev zêde bike. Digel vê yekê, 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 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, bişopînin tabindex="0"û ya 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="".

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ş

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.
derengxistin 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 ş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-ê ditirsin, 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 û hêmana vekêşanê wekî girêka DOM-ê wekî duyemîn tê gotin. Têkilî thisji bo nimûneya 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 hilavêtinê'

Ç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 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.
offset hejmar | ben 0 Veguheztina amûrê li gorî armanca xwe. Ji bo bêtir agahdarî serî li belgeyên offset yên Popper.js 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.js bidin
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 ya Popper.js bidin .

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.

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 .

$().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 bibe 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…
})