Source

Awọn imọran irinṣẹ

Iwe ati awọn apẹẹrẹ fun fifi awọn itọsi irinṣẹ Bootstrap aṣa pẹlu CSS ati JavaScript ni lilo CSS3 fun awọn ohun idanilaraya ati awọn abuda data fun ibi ipamọ akọle agbegbe.

Akopọ

Awọn nkan lati mọ nigba lilo ohun itanna ọpa irinṣẹ:

  • Tooltips gbekele lori 3rd party ìkàwé Popper.js fun ipo. O gbọdọ pẹlu popper.min.js ṣaaju bootstrap.js tabi lo bootstrap.bundle.min.js/ bootstrap.bundle.jseyiti o ni Popper.js ni ibere fun awọn imọran irinṣẹ lati ṣiṣẹ!
  • Ti o ba n kọ JavaScript wa lati orisun, o niloutil.js .
  • Awọn imọran irin-iṣẹ ti yọkuro fun awọn idi iṣẹ, nitorinaa o gbọdọ ṣe ipilẹṣẹ wọn funrararẹ .
  • Awọn imọran irinṣẹ pẹlu awọn akọle gigun-odo ko han rara.
  • Pato container: 'body'lati yago fun awọn iṣoro ṣiṣe ni awọn paati eka diẹ sii (bii awọn ẹgbẹ titẹ sii, awọn ẹgbẹ bọtini, ati bẹbẹ lọ).
  • Awọn italologo irinṣẹ ti nfa lori awọn eroja ti o farapamọ kii yoo ṣiṣẹ.
  • Irinṣẹ fun .disabledtabi disablederoja gbọdọ wa ni jeki lori a wrapper ano.
  • Nigbati o ba nfa lati awọn hyperlinks ti o gun awọn laini pupọ, awọn itọnisọna irinṣẹ yoo wa ni aarin. Lo white-space: nowrap;lori rẹ <a>s lati yago fun yi ihuwasi.
  • Awọn itọnisọna irinṣẹ gbọdọ wa ni pamọ ṣaaju ki o to yọkuro awọn eroja ti o baamu wọn lati DOM.
  • Awọn imọran irinṣẹ le ṣe okunfa ọpẹ si nkan kan ninu ojiji DOM kan.

Ipa iwara ti paati yii dale lori prefers-reduced-motionibeere media. Wo apakan išipopada ti o dinku ti iwe iraye si wa .

Ṣe o ni gbogbo iyẹn? O dara, jẹ ki a wo bi wọn ṣe n ṣiṣẹ pẹlu awọn apẹẹrẹ diẹ.

Apeere: Mu awọn imọran irinṣẹ ṣiṣẹ nibi gbogbo

Ọna kan lati bẹrẹ gbogbo awọn itọnisọna irinṣẹ lori oju-iwe kan yoo jẹ lati yan wọn nipasẹ data-toggleabuda wọn:

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

Awọn apẹẹrẹ

Raba lori awọn ọna asopọ ni isalẹ lati wo awọn imọran irinṣẹ:

Awọn sokoto to gun ni ipele keji keffiyeh o ṣee ṣe ko tii gbọ ti wọn. Photo agọ irungbọn aise Denimu letterpress ajewebe ojiṣẹ apo stumptown. Farm-to-tabili seitan, mcsweeney's fixie alagbero quinoa 8-bit American aṣọ ni Terry Richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, mẹrin loko mcsweeney ká cleanse vegan chambray. A gan ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw Denimu nikan-Oti kofi gbogun ti.

Raba lori awọn bọtini ni isalẹ lati wo awọn itọnisọna irinṣẹ mẹrin: oke, ọtun, isalẹ, ati osi.

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

Ati pẹlu HTML aṣa ti a ṣafikun:

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

Lilo

Ohun itanna ọpa irinṣẹ n ṣe agbejade akoonu ati isamisi lori ibeere, ati nipasẹ awọn aaye aiyipada awọn itọnisọna irinṣẹ lẹhin ipin okunfa wọn.

Ṣe okunfa ohun elo irinṣẹ nipasẹ JavaScript:

$('#example').tooltip(options)
Aponsedanu autoatiscroll

Ipo Irinṣẹ ngbiyanju lati yipada laifọwọyi nigbati eiyan obi kan ba ni overflow: autotabi overflow: scrollfẹran wa .table-responsive, ṣugbọn tun tọju ipo ipo atilẹba naa. Lati yanju, ṣeto boundaryaṣayan si ohunkohun miiran yatọ si iye aiyipada, 'scrollParent', gẹgẹbi 'window':

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

Siṣamisi

Aami ti a beere fun itọsi irinṣẹ jẹ abuda kan dataati titlelori ẹya HTML ti o fẹ lati ni itọpa irinṣẹ kan. Aami ti ipilẹṣẹ ti ọpa irinṣẹ jẹ kuku rọrun, botilẹjẹpe o nilo ipo kan (nipasẹ aiyipada, ṣeto si topnipasẹ ohun itanna).

Ṣiṣe awọn imọran irinṣẹ ṣiṣẹ fun keyboard ati awọn olumulo imọ-ẹrọ iranlọwọ

O yẹ ki o ṣafikun awọn itọsona irinṣẹ nikan si awọn eroja HTML ti o jẹ aifọwọyi-kibọọbu ti aṣa ati ibaraenisọrọ (gẹgẹbi awọn ọna asopọ tabi awọn idari fọọmu). Botilẹjẹpe awọn eroja HTML lainidii (gẹgẹbi awọn <span>s) le jẹ ki o ni idojukọ nipa fifi tabindex="0"ẹda naa kun, eyi yoo ṣafikun awọn iduro didanubi ati iruju awọn iduro lori awọn eroja ti kii ṣe ibaraenisọrọ fun awọn olumulo keyboard. Ni afikun, ọpọlọpọ awọn imọ-ẹrọ iranlọwọ lọwọlọwọ ko kede ọpa irinṣẹ ni ipo yii.

Ni afikun, maṣe gbarale hoverbi ohun ti o nfa ohun elo irinṣẹ rẹ, nitori eyi yoo jẹ ki awọn imọran irinṣẹ rẹ ko ṣee ṣe lati ṣe okunfa fun awọn olumulo keyboard.

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

Awọn eroja alaabo

Awọn eroja pẹlu ẹya disabledara ẹrọ kii ṣe ibaraenisepo, afipamo pe awọn olumulo ko le dojukọ, rababa, tabi tẹ wọn lati ṣe okunfa ohun elo irinṣẹ (tabi agbejade). Gẹgẹbi iṣẹ-ṣiṣe, iwọ yoo fẹ lati ma ṣe okunfa ohun elo irinṣẹ lati inu iwe-ipamọ <div>tabi <span>, ti a ṣe ni aifọwọyi-bọtini ni apere ni lilo tabindex="0", ki o si danu pointer-eventslori eroja alaabo naa.

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-animation="".

Ṣe akiyesi pe fun awọn idi aabo sanitize, sanitizeFnati whiteListawọn aṣayan ko le ṣe ipese pẹlu awọn abuda data.

Oruko Iru Aiyipada Apejuwe
iwara boolian ooto Waye iyipada ipare CSS kan si itọpa irinṣẹ
eiyan okun | ano | eke eke

Fi ohun elo irinṣẹ si eroja kan pato. Apeere container: 'body':. Aṣayan yii jẹ iwulo paapaa ni pe o fun ọ laaye lati gbe ọpa ọpa ni ṣiṣan ti iwe-ipamọ nitosi nkan ti o nfa - eyiti yoo ṣe idiwọ ọpa lati lilefoofo kuro ni nkan ti nfa lakoko iwọn window kan.
idaduro nọmba | nkan 0

Idaduro fififihan ati fifipamọ awọn itọpa irinṣẹ (ms) - ko kan si iru okunfa afọwọṣe

Ti nọmba kan ba pese, idaduro jẹ lilo si tọju/fihan mejeeji

Eto nkan jẹ:delay: { "show": 500, "hide": 100 }
html boolian eke

Gba HTML laaye ninu ọpa irinṣẹ.

Ti o ba jẹ ootọ, awọn afi HTML ninu ọpa irinṣẹ titleyoo ṣee ṣe ni itọsi irinṣẹ. Ti o ba jẹ eke, textọna jQuery yoo ṣee lo lati fi akoonu sii sinu DOM.

Lo ọrọ ti o ba ni aniyan nipa awọn ikọlu XSS.
ipo okun | iṣẹ 'oke'

Bawo ni lati ipo awọn Tooltip - auto | oke | isalẹ | osi | ọtun.
Nigbati o ba autowa ni pato, yoo tun ṣe atunto ohun elo irinṣẹ.

Nigbati a ba lo iṣẹ kan lati pinnu ipo, o pe pẹlu ọpa DOM node bi ariyanjiyan akọkọ rẹ ati node DOM ti o nfa bi keji rẹ. A thisti ṣeto ọrọ-ọrọ si apẹẹrẹ ọpa irinṣẹ.
yiyan okun | eke eke Ti o ba pese yiyan, awọn ohun elo irinṣẹ yoo jẹ aṣoju si awọn ibi-afẹde pàtó. Ni iṣe, eyi ni a lo lati tun lo awọn imọran irinṣẹ si awọn eroja DOM ti a ṣafikun ni agbara ( jQuery.onatilẹyin). Wo eyi ati apẹẹrẹ alaye .
awoṣe okun '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

HTML mimọ lati lo nigba ṣiṣẹda ọpa irinṣẹ.

Awọn itọsi irinṣẹ titleyoo jẹ itasi sinu .tooltip-inner.

.arrowyoo di itọka ọpa irinṣẹ.

Apo-apa- apo ti ita julọ yẹ ki o ni .tooltipkilasi ati role="tooltip".
akọle okun | ano | iṣẹ ''

Iwọn akọle aiyipada ti titleẹda ko ba si.

Ti a ba fun iṣẹ kan, yoo pe pẹlu thisitọka rẹ ti a ṣeto si ipin ti ọpa irinṣẹ ti so mọ.
okunfa okun 'fojusi lori'

Bawo ni itọka irinṣẹ ti wa ni jeki - tẹ | rababa | idojukọ | Afowoyi. O le ṣe ọpọlọpọ awọn okunfa; ya wọn pẹlu aaye kan.

'manual'tọkasi pe ọpa irinṣẹ yoo jẹ okunfa ni eto nipasẹ awọn .tooltip('show'), .tooltip('hide')ati .tooltip('toggle')awọn ọna; yi iye ko le wa ni idapo pelu eyikeyi miiran okunfa.

'hover'lori ara rẹ yoo ja si awọn imọran irinṣẹ ti ko le ṣe okunfa nipasẹ keyboard, ati pe o yẹ ki o lo nikan ti awọn ọna omiiran fun gbigbe alaye kanna fun awọn olumulo keyboard wa.
aiṣedeede nọmba | okun | iṣẹ 0

Aiṣedeede ti itọsi irinṣẹ ni ibatan si ibi-afẹde rẹ.

Nigbati a ba lo iṣẹ kan lati pinnu aiṣedeede, a pe pẹlu ohun kan ti o ni data aiṣedeede bi ariyanjiyan akọkọ rẹ. Iṣẹ naa gbọdọ da ohun kan pada pẹlu eto kanna. Ipin DOM ti o nfa ti kọja bi ariyanjiyan keji.

Fun alaye diẹ sii tọka si awọn iwe aiṣedeede Popper.js .
fallbackPlacement okun | orun 'isipade' Gba laaye lati pato iru ipo Popper yoo lo lori ipadabọ. Fun alaye diẹ sii tọka si awọn iwe aṣẹ ihuwasi ti Popper.js
ààlà okun | eroja 'yi lọ Obi' Aponsedanu ihamọ aala ti awọn ọpa. Gba awọn iye ti 'viewport', 'window', 'scrollParent', tabi itọkasi HTMLElement (JavaScript nikan). Fun alaye diẹ sii tọka si Popper.js's preventOverflow docs .
sọ di mimọ boolian ooto Muu ṣiṣẹ tabi mu isọdọmọ kuro. Ti o ba ti mu ṣiṣẹ 'template'ati 'title'awọn aṣayan yoo wa ni sanitized.
funfunList nkan Iwọn aiyipada Nkan ti o ni awọn abuda ti a gba laaye ati awọn afi
sanitizeFn asan | iṣẹ asan Nibi o le pese iṣẹ imototo tirẹ. Eyi le wulo ti o ba fẹ lati lo ile-ikawe iyasọtọ lati ṣe imototo.

Awọn abuda data fun awọn irinṣẹ irinṣẹ kọọkan

Awọn aṣayan fun awọn itọnisọna irinṣẹ kọọkan le jẹ iyasọtọ nipasẹ lilo awọn abuda data, bi a ti salaye loke.

Awọn ọna

Awọn ọna Asynchronous ati awọn iyipada

Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .

Wo iwe JavaScript wa fun alaye diẹ sii .

$().tooltip(options)

So olutọpa ohun elo kan si ikojọpọ eroja.

.tooltip('show')

Ṣe afihan ohun elo irinṣẹ eroja kan. Pada si olupe ṣaaju ki ohun elo irinṣẹ ti han (ie ṣaaju ki shown.bs.tooltipiṣẹlẹ naa to waye). Eyi ni a kà si “afọwọṣe” ti nfa ohun elo irinṣẹ. Awọn imọran irinṣẹ pẹlu awọn akọle gigun-odo ko han rara.

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

.tooltip('hide')

Ìbòmọlẹ ohun ano ká irinṣẹ. Pada si olupe ṣaaju ki ohun elo irinṣẹ to ti farapamọ (ie ṣaaju ki hidden.bs.tooltipiṣẹlẹ naa to waye). Eyi ni a kà si “afọwọṣe” ti nfa ohun elo irinṣẹ.

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

.tooltip('toggle')

Yipada ohun elo ti ohun elo. Pada si olupe ṣaaju ki ohun elo irinṣẹ ti han gangan tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.tooltiptabi hidden.bs.tooltipiṣẹlẹ to waye). Eyi ni a kà si “afọwọṣe” ti nfa ohun elo irinṣẹ.

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

.tooltip('dispose')

Hides ati ki o run ohun ano ká irinṣẹ. Awọn imọran irinṣẹ ti o lo aṣoju (eyiti a ṣẹda nipa lilo aṣayan ) selectorko le ṣe iparun ni ẹyọkan lori awọn eroja ti nfa ọmọ.

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

.tooltip('enable')

Yoo fun ohun ano ká ọpa ni agbara lati han. Awọn imọran irinṣẹ ṣiṣẹ nipasẹ aiyipada.

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

.tooltip('disable')

Yọ agbara kuro fun ohun elo irinṣẹ lati han. Ohun elo irinṣẹ yoo ni anfani lati han nikan ti o ba tun ṣiṣẹ.

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

.tooltip('toggleEnabled')

Yipada agbara fun ohun elo irinṣẹ lati han tabi pamọ.

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

.tooltip('update')

Ṣe imudojuiwọn ipo ti ohun elo irinṣẹ eroja.

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

Awọn iṣẹlẹ

Iṣẹlẹ Iru Apejuwe
show.bs.tooltip Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni.
han.bs.tooltip Iṣẹlẹ yii jẹ ina nigba ti ohun elo irinṣẹ ti han si olumulo (yoo duro fun awọn iyipada CSS lati pari).
tọju.bs.tooltip Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hideapẹẹrẹ ti pe.
farasin.bs.tooltip Iṣẹlẹ yii jẹ ina nigbati ohun elo irinṣẹ ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari).
ti a fi sii.bs.tooltip Iṣẹlẹ yii jẹ ina lẹhin show.bs.tooltipiṣẹlẹ naa nigbati awoṣe ọpa irinṣẹ ti ṣafikun si DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})