Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
Check
in English

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 watu wengine kwa nafasi. Ni lazima ujumuishe popper.min.js kabla ya bootstrap.js, au utumie bootstrap.bundle.min.jsiliyo na Popper.
  • 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.

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

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 .

Mifano

Washa vidokezo vya zana

Kama ilivyoelezwa hapo juu, lazima uanzishe vidokezo vya zana kabla ya kutumika. Njia moja ya kuanzisha vidokezo vyote kwenye ukurasa itakuwa kuvichagua kulingana na data-bs-togglesifa zao, kama hivyo:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

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

Maandishi ya kishika nafasi ili kuonyesha baadhi ya viungo vya ndani vilivyo na vidokezo vya zana. Hii sasa ni kujaza tu, hakuna muuaji. Maudhui yaliyowekwa hapa ili tu kuiga uwepo wa maandishi halisi . Na hayo yote ili tu kukupa wazo la jinsi vidokezo vya zana vinaweza kuonekana vinapotumiwa katika hali halisi ya ulimwengu. Kwa hivyo tunatumai kuwa sasa umeona jinsi vidokezo hivi kwenye viungo vinaweza kufanya kazi kwa vitendo, mara tu unapovitumia kwenye tovuti yako au mradi wako.

html 
<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>
Jisikie huru kutumia aidha titleau data-bs-titlekatika HTML yako. Inapotumika title, Popper itaibadilisha kiotomatiki na data-bs-titlekipengele kinapotolewa.

Vidokezo maalum vya zana

Imeongezwa katika v5.2.0

Unaweza kubinafsisha mwonekano wa vidokezo kwa kutumia vigeu vya CSS . Tunaweka darasa maalum data-bs-custom-class="custom-tooltip"ili kupeana mwonekano wetu maalum na kulitumia kubatilisha utofauti wa karibu wa CSS.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}
html 
<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Maelekezo

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" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-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" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Na SVG:

CSS

Vigezo

Imeongezwa katika v5.2.0

Kama sehemu ya mbinu ya mabadiliko ya vigeu vya CSS ya Bootstrap, vidokezo vya zana sasa vinatumia viambatisho vya ndani vya CSS .tooltipili kuboresha ubinafsishaji wa wakati halisi. Thamani za anuwai za CSS zimewekwa kupitia Sass, kwa hivyo ubinafsishaji wa Sass bado unatumika, pia.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};

Vigezo vya Sass

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

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:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)
Kufurika autonascroll

Msimamo wa kidokezo hujaribu kubadilika kiotomatiki wakati kontena kuu ina overflow: autoau overflow: scrollkama kama yetu .table-responsive, lakini bado huhifadhi 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:

const tooltip = new bootstrap.Tooltip('#example', {
  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" data-bs-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".

html 
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Chaguo

Kwa vile chaguo zinaweza kupitishwa kupitia sifa za data au JavaScript, unaweza kuongeza jina la chaguo kwa data-bs-, kama katika data-bs-animation="{value}". Hakikisha umebadilisha aina ya kipochi cha jina la chaguo kutoka " camelCase " hadi " kebab-case " wakati wa kupitisha chaguo kupitia sifa za data. Kwa mfano, tumia data-bs-custom-class="beautifier"badala ya data-bs-customClass="beautifier".

Kufikia Bootstrap 5.2.0, vipengee vyote vinaauni sifa ya data iliyohifadhiwa ya majaribiodata-bs-config ambayo inaweza kuweka usanidi wa sehemu rahisi kama mfuatano wa JSON. Wakati kipengele kina data-bs-config='{"delay":0, "title":123}'na data-bs-title="456"sifa, titlethamani ya mwisho itakuwa 456na sifa tofauti za data zitabatilisha thamani zilizotolewa kwenye data-bs-config. Kwa kuongezea, sifa zilizopo za data zinaweza kuweka maadili ya JSON kama data-bs-delay='{"show":0,"hide":150}'.

Kumbuka kuwa kwa sababu za usalama sanitize, sanitizeFn, na allowListchaguzi haziwezi kutolewa kwa kutumia sifa za data.
Jina Aina Chaguomsingi Maelezo
allowList kitu Thamani chaguomsingi Kitu ambacho kina sifa na lebo zinazoruhusiwa.
animation boolean true Tumia mpito wa kufifisha wa CSS kwenye kidokezo cha zana.
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 .
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.
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.
delay nambari, kitu 0 Kuchelewa kuonyesha na kuficha kidokezo cha zana (ms)—hakutumiki kwa aina ya kichochezi mwenyewe. Nambari ikitolewa, ucheleweshaji unatumika kwa Ficha/onyesho zote mbili. Muundo wa kitu ni delay: { "show": 500, "hide": 100 }:.
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 .
html boolean false Ruhusu HTML kwenye kidokezo cha zana. Ikiwa ni kweli, lebo za HTML kwenye kidokezo cha vidhibiti titlezitatolewa kwenye kidokezo. Ikiwa sivyo, innerTextkipengele kitatumika kuingiza maudhui kwenye DOM. Tumia maandishi ikiwa una wasiwasi kuhusu mashambulizi ya XSS.
offset safu, kamba, kazi [0, 0] Mpangilio wa kidokezo kuhusiana na lengo lake. Unaweza kupitisha mfuatano 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: kuteleza , umbali . Kwa maelezo zaidi rejelea hati za kukabiliana na Popper .
placement kamba, kazi 'top' Jinsi ya kuweka ncha ya zana: otomatiki, juu, chini, kushoto, kulia. 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. thisMuktadha umewekwa kwa mfano wa kidokezo .
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.
sanitize boolean true Washa au lemaza usafishaji. Ikiwashwa 'template', 'content'na 'title'chaguzi zitasafishwa.
sanitizeFn null, kazi null Hapa unaweza kusambaza kazi yako ya kusafisha. Hii inaweza kuwa muhimu ikiwa unapendelea kutumia maktaba maalum kutekeleza usafi wa mazingira.
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.onusaidizi). Tazama toleo hili 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 titlevitadungwa kwenye .tooltip-inner. .tooltip-arrowitakuwa mshale wa kidokezo. Kipengele cha kanga cha nje kinapaswa kuwa na .tooltipdarasa na role="tooltip".
title kamba, kipengele, kazi '' Thamani chaguo-msingi ya kichwa ikiwa titlesifa haipo. Ikiwa kipengele cha kukokotoa kitatolewa, kitaitwa na thismarejeleo yake yamewekwa kwa kipengele ambacho popover imeambatishwa.
trigger kamba 'hover focus' Jinsi kidokezo cha zana kinavyoanzishwa: bofya, elea, zingatia, mwongozo. Unaweza kupitisha vichochezi vingi; kuwatenganisha na nafasi. 'manual'inaonyesha kuwa kidokezo cha zana kitaanzishwa kiprogramu kupitia .tooltip('show'), .tooltip('hide')na .tooltip('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.

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 napopperConfig 

const tooltip = new bootstrap.Tooltip(element, {
  popperConfig(defaultBsPopperConfig) {
    // const 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 .

Njia Maelezo
disable Huondoa uwezo wa kidokezo cha kipengee kuonyeshwa. Kidokezo cha zana kitaweza tu kuonyeshwa ikiwa kimewashwa tena.
dispose 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.
enable Hutoa kidokezo cha zana cha kipengele uwezo wa kuonyeshwa. Vidokezo vya zana vinawezeshwa kwa chaguo-msingi.
getInstance Mbinu tuli inayokuruhusu kupata mfano wa kidokezo kinachohusishwa na kipengele cha DOM, au uunde kipya iwapo hakijaanzishwa.
getOrCreateInstance Mbinu tuli inayokuruhusu kupata mfano wa kidokezo kinachohusishwa na kipengele cha DOM, au uunde kipya iwapo hakijaanzishwa.
hide 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.
setContent Hutoa njia ya kubadilisha maudhui ya kidokezo baada ya kuanzishwa kwake.
show 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.
toggle 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.
toggleEnabled Hugeuza uwezo wa kidokezo cha kipengee kuonyeshwa au kufichwa.
update Husasisha nafasi ya kidokezo cha kipengee. 
const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })
Mbinu setContentinakubali objecthoja, ambapo kila ufunguo wa mali ni stringkiteuzi halali ndani ya kiolezo cha popover, na kila thamani ya mali inayohusiana inaweza kuwa string| element| function| null

Matukio

Tukio Maelezo
hide.bs.tooltip Tukio hili linafutwa mara moja wakati hidenjia ya mfano imeitwa.
hidden.bs.tooltip Tukio hili linafutwa wakati popover imekamilika kufichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika).
inserted.bs.tooltip Tukio hili linafutwa baada ya show.bs.tooltiptukio wakati kiolezo cha kidokezo kimeongezwa kwenye DOM.
show.bs.tooltip Tukio hili huwaka mara moja wakati shownjia ya mfano inaitwa.
shown.bs.tooltip Tukio hili linafutwa wakati popover imefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika). 
const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()