Leideanna uirlisí

Forbhreathnú

Rudaí le fios agus an breiseán leid uirlisí á úsáid agat:

• Bíonn leideanna uirlisí ag brath ar Phopper na leabharlainne 3ú páirtí le haghaidh suímh. Ní mór duit popper.min.js a chur san áireamh roimh bootstrap.js nó úsáid bootstrap.bundle.min.js/ bootstrap.bundle.jsina bhfuil Popper le go n-oibreoidh leideanna uirlisí!
• Is rogha an diúltaithe iad leideanna uirlisí ar chúiseanna feidhmíochta, mar sin ní mór duit iad a thosú tú féin .
• Ní thaispeántar leideanna uirlisí le teidil fad nialasacha riamh.
• Sonraigh container: 'body'chun fadhbanna rindreála a sheachaint i gcomhpháirteanna níos casta (amhail ár ngrúpaí ionchuir, grúpaí cnaipí, srl).
• Ní oibreoidh leideanna uirlisí ar eilimintí ceilte a spreagadh.
• Ní mór leideanna uirlisí .disablednó disabledeilimintí a spreagadh ar eilimint chumhdaigh.
• Nuair a spreagtar iad ó hipearnasc a théann thar línte iolracha, díreofar leideanna uirlisí. Bain úsáid as white-space: nowrap;ar do <a>chuid chun an iompar seo a sheachaint.
• Ní mór leideanna uirlisí a chur i bhfolach sula mbaintear na heilimintí comhfhreagracha den DOM.
• Is féidir leideanna uirlisí a spreagadh a bhuíochas le heilimint taobh istigh de scáth DOM.

Fuair ​​sin go léir? Go hiontach, déanaimis a fheiceáil conas a oibríonn siad le roinnt samplaí.

Sampla: Cumasaigh leideanna i ngach áit

Bealach amháin chun na leideanna uirlisí go léir ar leathanach a thosú ná iad a roghnú de réir a n- data-bs-toggletréith:

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

Samplaí

Aló thar na naisc thíos chun leideanna uirlisí a fheiceáil:

Ainligh thar na cnaipí thíos chun na ceithre threo leideanna uirlisí a fheiceáil: barr, ar dheis, ag bun agus ar chlé. Léirítear treoracha nuair a bhíonn Bootstrap in úsáid in 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>

Agus le HTML saincheaptha curtha leis:

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

Le SVG:

Sass

Athróga

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

Úsáid

Gineann an breiseán leid uirlisí inneachar agus marcáil ar éileamh, agus de réir réamhshocraithe cuireann sé leideanna uirlisí i ndiaidh a n-eiliminte truicear.

Spreag an leid uirlisí trí JavaScript:

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

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

Marcáil

Níl sa mharcáil riachtanach do leid uirlisí ach datatréith agus titlear an eilimint HTML is mian leat leid uirlisí a bheith agat. Tá an marcáil ginte ar leid uirlisí sách simplí, cé go dteastaíonn suíomh uaidh (de réir réamhshocraithe, socraithe topag an mbreiseán).

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

Eilimintí faoi mhíchumas

Níl na heilimintí leis an disabledtréith idirghníomhach, rud a chiallaíonn nach féidir le húsáideoirí díriú orthu, iad a ainliú nó a chliceáil chun leid uirlisí (nó aníos aníos) a spreagadh. Mar réiteach oibre, beidh tú ag iarraidh an leid uirlisí a spreagadh ó fhillteán <div>nó <span>, atá dírithe ar mhéarchlár go hidéalach ag baint úsáide as 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>

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-bs-, mar atá i data-bs-animation="". Bí cinnte cineál an cháis den ainm rogha a athrú ó camelCase go cás ceibeab agus tú ag dul thar na roghanna trí tréithe sonraí. Mar shampla, in ionad úsáid a bhaint as data-bs-customClass="beautifier", bain úsáid as data-bs-custom-class="beautifier".

Ag baint úsáide as feidhm lepopperConfig

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

Modhanna

seó

Nochtann leid uirlisí eilimint. Filleann sé ar an nglaoiteoir sula dtaispeántar an leid uirlisí (ie sula shown.bs.tooltipdtarlaíonn an teagmhas). Meastar gur spreagadh “láimhe” é seo don leid uirlisí. Ní thaispeántar leideanna uirlisí le teidil fad nialasacha riamh.

tooltip.show()

ceilt

Folaigh leid uirlisí eiliminte. Filleann sé ar an nglaoiteoir sula mbeidh an leid uirlisí curtha i bhfolach (ie sula hidden.bs.tooltipdtarlaíonn an t-imeacht). Meastar gur spreagadh “láimhe” é seo don leid uirlisí.

tooltip.hide()

scoránaigh

Scoránaigh an leid uirlisí eilimint. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an leid uirlisí (.i. sula dtarlaíonn shown.bs.tooltipnó sula hidden.bs.tooltipdtarlaíonn an teagmhas). Meastar gur spreagadh “láimhe” é seo don leid uirlisí.

tooltip.toggle()

a dhiúscairt

Seithí agus scriosann leid uirlisí eilimint (Baintear sonraí stóráilte ar an eilimint DOM). Ní féidir leideanna uirlisí a úsáideann tarmligean (a chruthaítear leis an selectorrogha ) a scrios ina n-aonar ar eilimintí truicear sliocht.

tooltip.dispose()

chumasú

Tugann sé seo leid uirlisí eilimint an cumas a thaispeáint. Tá leideanna uirlisí cumasaithe de réir réamhshocraithe.

tooltip.enable()

dhíchumasú

Baintear an cumas chun leid uirlisí eiliminte a thaispeáint. Ní bheidh an leid uirlisí in ann a thaispeáint ach amháin má tá sé ath-chumasaithe.

tooltip.disable()

scoránaigh Cumasaithe

Scoránaigh an cumas chun leid uirlisí eiliminte a thaispeáint nó a fholach.

tooltip.toggleEnabled()

nuashonrú

Nuashonraítear suíomh leid uirlisí eiliminte.

tooltip.update()

faighInstance

Modh statach a cheadaíonn duit an t-ásc leid uirlisí a bhaineann le heilimint DOM a fháil

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

getOrCreateInstance

Modh statach a cheadaíonn duit an t-ásc leid uirlisí a bhaineann le heilimint DOM a fháil, nó ceann nua a chruthú ar eagla nach dtosaíodh é

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

Imeachtaí

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

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

tooltip.hide()