Vidokezo vya zana

Hati na mifano ya kuongeza vidokezo maalum vya Bootstrap na CSS na JavaScript kwa kutumia CSS3 kwa uhuishaji na data-bs-sifa kwa hifadhi ya mada ya ndani.

Katika ukurasa huu

Muhtasari

Mambo ya kujua unapotumia programu-jalizi ya kidokezo:

Vidokezo vya zana hutegemea Popper ya maktaba ya mtu mwingine kwa nafasi. Lazima ujumuishe popper.min.js kabla ya bootstrap.js au utumie bootstrap.bundle.min.js/ bootstrap.bundle.jsambayo ina Popper ili vidokezo vya kufanya kazi!
Vidokezo vya zana ni kuchagua kuingia kwa sababu za utendakazi, kwa hivyo ni lazima uanzishe wewe mwenyewe .
Vidokezo vya zana vyenye vichwa vya urefu sifuri havionyeshwi kamwe.
Bainisha container: 'body'ili kuepuka kutoa matatizo katika vipengele changamano zaidi (kama vile vikundi vyetu vya ingizo, vikundi vya vitufe, n.k).
Kuanzisha vidokezo kwenye vipengele vilivyofichwa haitafanya kazi.
Vidokezo vya zana .disabledau disabledvipengele lazima vianzishwe kwenye kipengele cha kanga.
Inapoanzishwa kutoka kwa viungo vinavyotumia mistari mingi, vidokezo vya zana vitawekwa katikati. Tumia white-space: nowrap;kwenye yako <a>ili kuepuka tabia hii.
Vidokezo vya zana lazima vifichwe kabla ya vipengee vinavyolingana kuondolewa kwenye DOM.
Vidokezo vya zana vinaweza kuanzishwa shukrani kwa kipengele ndani ya DOM ya kivuli.

Kwa chaguomsingi, kipengee hiki hutumia kisafishaji cha maudhui kilichojengewa ndani, ambacho huondoa vipengele vyovyote vya HTML ambavyo haviruhusiwi kwa uwazi. Tazama sehemu ya sanitizer katika hati zetu za JavaScript kwa maelezo zaidi.

Athari ya uhuishaji ya kipengele hiki inategemea prefers-reduced-motionhoja ya midia. Tazama sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .

Umepata hayo yote? Kubwa, wacha tuone jinsi wanavyofanya kazi na mifano kadhaa.

Mfano: Washa vidokezo vya zana kila mahali

Njia moja ya kuanzisha vidokezo vyote kwenye ukurasa itakuwa kuvichagua kulingana na data-bs-togglesifa zao:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Mifano

Elea juu ya viungo vilivyo hapa chini ili kuona vidokezo vya zana:

Elea juu ya vitufe vilivyo hapa chini ili kuona maelekezo manne ya vidokezo: juu, kulia, chini na kushoto. Maelekezo yanaangaziwa unapotumia Bootstrap katika RTL.

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

Na HTML maalum imeongezwa:

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

Na SVG:

Sass

Vigezo

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

Matumizi

Programu-jalizi ya kidokezo huzalisha maudhui na uwekaji alama inapohitajika, na kwa chaguo-msingi vidokezo vya mahali baada ya kipengee cha vianzishaji.

Anzisha kidokezo cha zana kupitia JavaScript:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

Kufurika `auto`na`scroll`

Msimamo wa kidokezo hujaribu kubadilika kiotomatiki wakati kontena kuu ina overflow: autoau overflow: scrollkama kama yetu .table-responsive, lakini bado hudumisha nafasi ya uwekaji asili. Ili kusuluhisha hili, weka boundarychaguo (kwa kirekebishaji kwa kutumia popperConfigchaguo) kwa HTMLElement yoyote ili kubatilisha thamani chaguo-msingi, 'clippingParents', kama vile document.body:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

Alama

Alama inayohitajika ya kidokezo ni datasifa tu na titlekwenye kipengee cha HTML ungependa kuwa na kidokezo. Alama inayozalishwa ya kidokezo ni rahisi, ingawa inahitaji nafasi (kwa chaguo-msingi, iliyowekwa topna programu-jalizi).

Kufanya vidokezo vya zana kufanya kazi kwa watumiaji wa kibodi na teknolojia saidizi

Unapaswa kuongeza vidokezo vya zana kwenye vipengele vya HTML ambavyo kwa kawaida vinaweza kulenga kibodi na shirikishi (kama vile viungo au vidhibiti vya fomu). Ingawa vipengele vya HTML vya kiholela (kama vile <span>s) vinaweza kuangaziwa kwa kuongeza tabindex="0"sifa, hii itaongeza vichupo vinavyoweza kuudhi na kutatanisha kwenye vipengele visivyoingiliana kwa watumiaji wa kibodi, na teknolojia nyingi za usaidizi kwa sasa hazitangazi kidokezo katika hali hii. Zaidi ya hayo, usitegemee pekee hoverkama kichochezi cha kidokezo chako, kwa kuwa hii itafanya vidokezo vyako vishindwe kuanzisha kwa watumiaji wa kibodi.

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

Vipengele vilivyozimwa

Vipengele vilivyo na disabledsifa haviingiliani, kumaanisha kuwa watumiaji hawawezi kuangazia, kuelea juu au kubofya ili kuanzisha kidokezo cha zana (au popover). Kama njia ya kurekebisha, utataka kuamsha kidokezo kutoka kwa kanga <div>au <span>, iliyofanywa iweze kulenga kibodi kwa kutumia 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>

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-bs-, kama katika data-bs-animation="". Hakikisha umebadilisha aina ya kipochi cha jina la chaguo kutoka kwa camelCase hadi kebab-kesi wakati wa kupitisha chaguo kupitia sifa za data. Kwa mfano, badala ya kutumia data-bs-customClass="beautifier", tumia data-bs-custom-class="beautifier".

Kumbuka kuwa kwa sababu za usalama sanitize, sanitizeFn, na allowListchaguzi haziwezi kutolewa kwa kutumia sifa za data.

Jina	Aina	Chaguomsingi	Maelezo
`animation`	boolean	`true`	Tumia mpito wa kufifisha wa CSS kwenye kidokezo cha zana
`container`	kamba \| kipengele \| uongo	`false`	Huweka kidokezo kwa kipengele maalum. Mfano `container: 'body'`:. Chaguo hili ni muhimu sana kwa kuwa hukuruhusu kuweka ncha ya zana katika mtiririko wa hati karibu na kipengee cha kuamsha - ambayo itazuia ncha ya zana kuelea kutoka kwa kipengee cha kuchochea wakati wa kubadilisha ukubwa wa dirisha.
`delay`	nambari \| kitu	`0`	Kuchelewa kuonyesha na kuficha kidokezo cha zana (ms) - haitumiki kwa aina ya kichochezi cha mwongozo Nambari ikitolewa, ucheleweshaji unatumika kwa Ficha/onyesho zote mbili Muundo wa kitu ni:`delay: { "show": 500, "hide": 100 }`
`html`	boolean	`false`	Ruhusu HTML kwenye kidokezo cha zana. Ikiwa ni kweli, lebo za HTML kwenye kidokezo cha vidhibiti `title`zitatolewa kwenye kidokezo. Ikiwa sivyo, `innerText`kipengele kitatumika kuingiza maudhui kwenye DOM. Tumia maandishi ikiwa una wasiwasi kuhusu mashambulizi ya XSS.
`placement`	kamba \| kazi	`'top'`	Jinsi ya kuweka ncha ya zana - otomatiki \| juu \| chini \| kushoto \| haki. Ikibainishwa `auto`, itaelekeza upya kidirisha cha zana. Wakati kipengele cha chaguo za kukokotoa kinapotumiwa kubainisha uwekaji, huitwa kifundo cha kifundo cha DOM kama hoja yake ya kwanza na kipengee cha kuanzisha nodi ya DOM kama ya pili. `this`Muktadha umewekwa kwa mfano wa kidokezo .
`selector`	kamba \| uongo	`false`	Iwapo kiteuzi kitatolewa, vipengee vya vidokezo vitakabidhiwa kwa walengwa maalum. Kwa mazoezi, hii inatumika pia kutumia vidokezo kwa vipengele vya DOM vilivyoongezwa kwa nguvu ( `jQuery.on`usaidizi). Tazama hii na mfano wa kuelimisha .
`template`	kamba	`'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`	HTML msingi ya kutumia wakati wa kuunda kidokezo. Vidokezo vya zana `title`vitadungwa kwenye `.tooltip-inner`. `.tooltip-arrow`itakuwa mshale wa kidokezo. Kipengele cha kanga cha nje kinapaswa kuwa na `.tooltip`darasa na `role="tooltip"`.
`title`	kamba \| kipengele \| kazi	`''`	Thamani chaguo-msingi ya kichwa ikiwa `title`sifa haipo. Ikiwa kipengele cha kukokotoa kitatolewa, kitaitwa kikiwa na `this`marejeleo yake yaliyowekwa kwa kipengele ambacho kidokezo cha zana kimeambatishwa.
`trigger`	kamba	`'hover focus'`	Jinsi kidokezo kinavyoanzishwa - bofya \| ruka \| kuzingatia \| mwongozo. Unaweza kupitisha vichochezi vingi; kuwatenganisha na nafasi. `'manual'`inaonyesha kuwa kidokezo cha zana kitaanzishwa kiprogramu kupitia `.show()`, `.hide()`na `.toggle()`mbinu; thamani hii haiwezi kuunganishwa na kichochezi kingine chochote. `'hover'`peke yake itasababisha vidokezo vya zana ambavyo haviwezi kuanzishwa kupitia kibodi, na inapaswa kutumika tu ikiwa mbinu mbadala za kuwasilisha taarifa sawa kwa watumiaji wa kibodi zipo.
`fallbackPlacements`	safu	`['top', 'right', 'bottom', 'left']`	Bainisha uwekaji nyuma kwa kutoa orodha ya uwekaji katika safu (kwa mpangilio wa upendeleo). Kwa habari zaidi rejelea hati za tabia za Popper
`boundary`	kamba \| kipengele	`'clippingParents'`	Kizuizi cha vizuizi vya kufurika cha ncha ya zana (inatumika tu kwa kirekebishaji cha Popper cha preventOverflow). Kwa chaguo-msingi ni `'clippingParents'`na inaweza kukubali rejeleo la HTMLElement (kupitia JavaScript pekee). Kwa maelezo zaidi rejelea hati za detectOverflow za Popper .
`customClass`	kamba \| kazi	`''`	Ongeza madarasa kwenye kidokezo cha zana kinapoonyeshwa. Kumbuka kuwa madarasa haya yataongezwa pamoja na madarasa yoyote yaliyobainishwa kwenye kiolezo. Ili kuongeza madarasa mengi, yatenganishe na nafasi: `'class-1 class-2'`. Unaweza pia kupitisha chaguo za kukokotoa ambazo zinapaswa kurudisha mfuatano mmoja ulio na majina ya ziada ya darasa.
`sanitize`	boolean	`true`	Washa au lemaza usafishaji. Ikiwa imeamilishwa `'template'`na `'title'`chaguzi zitasafishwa. Tazama sehemu ya sanitizer katika hati zetu za JavaScript .
`allowList`	kitu	Thamani chaguomsingi	Kitu ambacho kina sifa na lebo zinazoruhusiwa
`sanitizeFn`	null \| kazi	`null`	Hapa unaweza kusambaza kazi yako ya kusafisha. Hii inaweza kuwa muhimu ikiwa unapendelea kutumia maktaba maalum kutekeleza usafi wa mazingira.
`offset`	safu \| kamba \| kazi	`[0, 0]`	Mpangilio wa kidokezo kuhusiana na lengo lake. Unaweza kupitisha kamba katika sifa za data na maadili yaliyotenganishwa kwa koma kama:`data-bs-offset="10,20"` Wakati kipengele cha chaguo za kukokotoa kinapotumiwa kubainisha urekebishaji, huitwa na kitu kilicho na uwekaji wa popper, rejeleo, na miondoko ya popper kama hoja yake ya kwanza. Kipengele cha kuchochea nodi ya DOM hupitishwa kama hoja ya pili. Chaguo la kukokotoa lazima lirudishe safu iliyo na nambari mbili: .`[skidding, distance]` Kwa maelezo zaidi rejelea hati za kukabiliana na Popper .
`popperConfig`	null \| kitu \| kazi	`null`	Ili kubadilisha usanidi chaguo-msingi wa Bootstrap wa Popper, angalia usanidi wa Popper . Chaguo za kukokotoa zinapotumiwa kuunda usanidi wa Popper, huitwa na kitu ambacho kina usanidi chaguo-msingi wa Bootstrap wa Popper. Inakusaidia kutumia na kuunganisha chaguo-msingi na usanidi wako mwenyewe. Chaguo la kukokotoa lazima lirudishe kipengee cha usanidi kwa Popper.

Sifa za data za vidokezo vya mtu binafsi

Chaguzi za vidokezo vya mtu binafsi zinaweza kubainishwa kwa matumizi ya sifa za data, kama ilivyoelezwa hapo juu.

Kutumia kipengele na`popperConfig`

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Mbinu

Njia za Asynchronous na mabadiliko

Njia zote za API ni za asynchronous na zinaanzisha mpito . Wanarudi kwa mpigaji mara tu mpito unapoanza lakini kabla haujaisha . Kwa kuongeza, simu ya mbinu kwenye sehemu ya mpito itapuuzwa .

Tazama hati zetu za JavaScript kwa maelezo zaidi .

onyesha

Hufichua kidokezo cha kipengele. Hurejesha kwa mpigaji simu kabla ya kidokezo cha zana kuonyeshwa (yaani kabla ya shown.bs.tooltiptukio kutokea). Hii inachukuliwa kuwa kichocheo cha "mwongozo" cha ncha ya zana. Vidokezo vya zana vyenye vichwa vya urefu sifuri havionyeshwi kamwe.

tooltip.show()

kujificha

Huficha kidokezo cha kipengele. Hurejesha kwa mpigaji simu kabla ya kidokezo cha zana kufichwa (yaani kabla ya hidden.bs.tooltiptukio kutokea). Hii inachukuliwa kuwa kichocheo cha "mwongozo" cha ncha ya zana.

tooltip.hide()

kugeuza

Hugeuza kidokezo cha kipengee. Hurejesha kwa mpigaji simu kabla ya kidokezo cha zana kuonyeshwa au kufichwa (yaani kabla ya tukio shown.bs.tooltipau hidden.bs.tooltiptukio). Hii inachukuliwa kuwa kichocheo cha "mwongozo" cha ncha ya zana.

tooltip.toggle()

tupa

Huficha na kuharibu ncha ya zana ya kipengele (Huondoa data iliyohifadhiwa kwenye kipengele cha DOM). Vidokezo vya zana vinavyotumia ugawaji madaraka (ambavyo vimeundwa kwa kutumia chaguo )selector haviwezi kuharibiwa kibinafsi kwenye vipengele vya vichochezi vya kizazi.

tooltip.dispose()

wezesha

Hutoa kidokezo cha zana cha kipengele uwezo wa kuonyeshwa. Vidokezo vya zana vinawezeshwa kwa chaguo-msingi.

tooltip.enable()

Lemaza

Huondoa uwezo wa kidokezo cha kipengee kuonyeshwa. Kidokezo cha zana kitaweza tu kuonyeshwa ikiwa kimewashwa tena.

tooltip.disable()

kugeuzaImewashwa

Hugeuza uwezo wa kidokezo cha kipengee kuonyeshwa au kufichwa.

tooltip.toggleEnabled()

sasisha

Husasisha nafasi ya kidokezo cha kipengee.

tooltip.update()

getInstance

Njia tuli ambayo hukuruhusu kupata mfano wa kidokezo kinachohusishwa na kipengee cha DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

Njia tuli ambayo hukuruhusu kupata mfano wa kidokezo kinachohusishwa na kipengee cha DOM, au kuunda mpya ikiwa haikuanzishwa.

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Matukio

Aina ya tukio	Maelezo
`show.bs.tooltip`	Tukio hili huwaka mara moja wakati `show`njia ya mfano inaitwa.
`shown.bs.tooltip`	Tukio hili huwashwa wakati kidokezo cha zana kimefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya CSS yakamilike).
`hide.bs.tooltip`	Tukio hili linafutwa mara moja wakati `hide`njia ya mfano imeitwa.
`hidden.bs.tooltip`	Tukio hili hutupwa wakati kidokezo kimekamilika kufichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya CSS yakamilike).
`inserted.bs.tooltip`	Tukio hili linafutwa baada ya `show.bs.tooltip`tukio wakati kiolezo cha kidokezo kimeongezwa kwenye DOM.

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()