Awọn imọran irinṣẹ
Awọn iwe-ipamọ ati awọn apẹẹrẹ fun fifi awọn irinṣẹ irinṣẹ Bootstrap aṣa pẹlu CSS ati JavaScript nipa lilo CSS3 fun awọn ohun idanilaraya ati awọn abuda data-bs-fun ibi ipamọ akọle agbegbe.
Akopọ
Awọn nkan lati mọ nigba lilo ohun itanna ọpa irinṣẹ:
- Awọn imọran irinṣẹ da lori ile-ikawe ẹgbẹ kẹta Popper fun ipo. O gbọdọ pẹlu popper.min.js ṣaaju bootstrap.js tabi lo
bootstrap.bundle.min.js
/bootstrap.bundle.js
eyiti o ni Popper ni ibere fun awọn imọran irinṣẹ lati ṣiṣẹ! - 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
.disabled
tabidisabled
eroja 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.
prefers-reduced-motion
ibeere 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-bs-toggle
abuda wọn:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Awọn apẹẹrẹ
Raba lori awọn ọna asopọ ni isalẹ lati wo awọn imọran irinṣẹ:
Ọrọ ibi ipamọ lati ṣe afihan diẹ ninu awọn ọna asopọ laini pẹlu awọn itọnisọna irinṣẹ. Eyi jẹ kikun ni bayi, ko si apaniyan. Akoonu ti a gbe si ibi kan lati farawe wiwa ọrọ gidi . Ati pe gbogbo eyi o kan lati fun ọ ni imọran bi awọn imọran irinṣẹ yoo ṣe rii nigba lilo ni awọn ipo gidi-aye. Nitorinaa ni ireti pe o ti rii bayi bii awọn imọran irinṣẹ lori awọn ọna asopọ le ṣiṣẹ ni iṣe, ni kete ti o ba lo wọn lori aaye tirẹ tabi iṣẹ akanṣe.
Raba lori awọn bọtini ni isalẹ lati wo awọn itọnisọna irinṣẹ mẹrin: oke, ọtun, isalẹ, ati osi. Awọn itọnisọna jẹ digi nigba lilo Bootstrap ni 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>
Ati pẹlu HTML aṣa ti a ṣafikun:
<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>
Pẹlu SVG:
Sass
Awọn oniyipada
$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;
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:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Aponsedanu auto
atiscroll
Ipo Irinṣẹ ngbiyanju lati yipada laifọwọyi nigbati eiyan obi kan ba ni overflow: auto
tabi overflow: scroll
fẹran wa .table-responsive
, ṣugbọn tun tọju ipo ipo atilẹba naa. Lati yanju eyi, ṣeto boundary
aṣayan (fun iyipada isipade nipa lilo popperConfig
aṣayan) si eyikeyi HTMLElement lati yiyipada iye aiyipada, 'clippingParents'
, bii document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Siṣamisi
Aami ti a beere fun itọsi irinṣẹ jẹ abuda kan data
ati title
lori ẹ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 top
nipasẹ 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ọ nipasẹ fifi ẹya ara ẹrọ kun tabindex="0"
, eyi yoo ṣafikun awọn iduro didanubi ati iruju lori awọn eroja ti kii ṣe ibaraenisepo fun awọn olumulo keyboard, ati ọ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 hover
bi 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-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>
Awọn eroja alaabo
Awọn eroja pẹlu ẹya disabled
ara ẹ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-idojukọ keyboard nipa lilo 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>
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-bs-
, bi ninu data-bs-animation=""
. Rii daju lati yi iru ọran ti orukọ aṣayan pada lati camelCase si kebab-case nigba gbigbe awọn aṣayan nipasẹ awọn abuda data. Fun apẹẹrẹ, dipo lilo data-bs-customClass="beautifier"
, lo data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, ati
allowList
awọn aṣayan ko ṣe pese pẹlu awọn abuda data.
Oruko | Iru | Aiyipada | Apejuwe |
---|---|---|---|
animation |
boolian | true |
Waye iyipada ipare CSS kan si itọpa irinṣẹ |
container |
okun | ano | eke | false |
Fi ohun elo irinṣẹ si eroja kan pato. Apeere |
delay |
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ẹ: |
html |
boolian | false |
Gba HTML laaye ninu ọpa irinṣẹ. Ti o ba jẹ ootọ, awọn afi HTML ninu ọpa irinṣẹ Lo ọrọ ti o ba ni aniyan nipa awọn ikọlu XSS. |
placement |
okun | iṣẹ | 'top' |
Bawo ni lati ipo awọn Tooltip - auto | oke | isalẹ | osi | ọtun. 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 |
selector |
okun | eke | false |
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.on atilẹyin). Wo eyi ati apẹẹrẹ alaye . |
template |
okun | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
HTML mimọ lati lo nigba ṣiṣẹda ọpa irinṣẹ. Awọn itọsi irinṣẹ
Apo-apa- apo ti ita julọ yẹ ki o ni |
title |
okun | ano | iṣẹ | '' |
Iwọn akọle aiyipada ti Ti a ba fun iṣẹ kan, yoo pe pẹlu |
trigger |
okun | 'hover focus' |
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.
|
fallbackPlacements |
orun | ['top', 'right', 'bottom', 'left'] |
Ṣetumo awọn ibi ifẹhinti nipa pipese atokọ ti awọn ipo ni titobi (ni aṣẹ ti o fẹ). Fun alaye diẹ sii tọka si awọn iwe aṣẹ ihuwasi Popper |
boundary |
okun | eroja | 'clippingParents' |
Ààlà àkúnwọ́sílẹ̀ àkúnwọ́sílẹ̀ ohun èlò irinṣẹ́ (o kan àtúnṣe ìdènàOverflow ti Popper nìkan). Nipa aiyipada o jẹ 'clippingParents' ati pe o le gba itọkasi HTMLElement (nipasẹ JavaScript nikan). Fun alaye diẹ sii tọka si Popper's detectOverflow docs . |
customClass |
okun | iṣẹ | '' |
Ṣafikun awọn kilasi si itọpa irinṣẹ nigbati o han. Ṣe akiyesi pe awọn kilasi wọnyi yoo ṣafikun ni afikun si eyikeyi awọn kilasi pato ninu awoṣe. Lati ṣafikun awọn kilasi pupọ, ya wọn sọtọ pẹlu awọn alafo O tun le ṣe iṣẹ kan ti o yẹ ki o da okun kan pada ti o ni awọn orukọ kilasi afikun ninu. |
sanitize |
boolian | true |
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. Wo apakan sanitizer ninu iwe JavaScript wa . |
allowList |
nkan | Iwọn aiyipada | Nkan ti o ni awọn abuda ti a gba laaye ati awọn afi |
sanitizeFn |
asan | iṣẹ | null |
Nibi o le pese iṣẹ imototo tirẹ. Eyi le wulo ti o ba fẹ lati lo ile-ikawe iyasọtọ lati ṣe imototo. |
offset |
orun | okun | iṣẹ | [0, 0] |
Aiṣedeede ti itọsi irinṣẹ ni ibatan si ibi-afẹde rẹ. O le kọja okun kan ninu awọn abuda data pẹlu awọn iye ti o ya sọtọ komama bii: Nigba ti a ba lo iṣẹ kan lati pinnu aiṣedeede, a npe ni pẹlu ohun ti o ni ibi-popper, itọkasi, ati popper rects bi ariyanjiyan akọkọ rẹ. Ipin DOM ti o nfa ti kọja bi ariyanjiyan keji. Iṣẹ naa gbọdọ da orun pada pẹlu awọn nọmba meji: . Fun alaye diẹ sii tọka si awọn iwe aiṣedeede Popper . |
popperConfig |
asan | ohun | iṣẹ | null |
Lati yi Bootstrap aiyipada atunto Popper pada, wo iṣeto Popper . Nigba ti a ba lo iṣẹ kan lati ṣẹda iṣeto Popper, o pe pẹlu ohun kan ti o ni iṣeto ni aiyipada Bootstrap. O ṣe iranlọwọ fun ọ lati lo ati dapọ aiyipada pẹlu iṣeto ni tirẹ. Iṣẹ naa gbọdọ da ohun atunto pada fun Popper. |
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.
Lilo iṣẹ pẹlupopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
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 .
ifihan
Ṣe afihan ohun elo irinṣẹ eroja kan. Pada si olupe ṣaaju ki ohun elo irinṣẹ ti han (ie ṣaaju ki shown.bs.tooltip
iṣẹ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.
tooltip.show()
tọju
Ìbòmọlẹ ohun ano ká irinṣẹ. Pada si olupe ṣaaju ki ohun elo irinṣẹ to ti farapamọ (ie ṣaaju ki hidden.bs.tooltip
iṣẹlẹ naa to waye). Eyi ni a kà si “afọwọṣe” ti nfa ohun elo irinṣẹ.
tooltip.hide()
yipada
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.tooltip
tabi hidden.bs.tooltip
iṣẹlẹ to waye). Eyi ni a kà si “afọwọṣe” ti nfa ohun elo irinṣẹ.
tooltip.toggle()
sọnù
Fipamọ ati pa ohun elo irinṣẹ eroja kuro (Yọ data ti o fipamọ sori nkan DOM kuro). Awọn imọran irinṣẹ ti o lo aṣoju (eyiti a ṣẹda nipa lilo aṣayan ) selector
ko le ṣe iparun ni ẹyọkan lori awọn eroja ti nfa ọmọ.
tooltip.dispose()
mu ṣiṣẹ
Yoo fun ohun ano ká ọpa ni agbara lati han. Awọn imọran irinṣẹ ṣiṣẹ nipasẹ aiyipada.
tooltip.enable()
mu ṣiṣẹ
Yọ agbara kuro fun ohun elo irinṣẹ lati han. Ohun elo irinṣẹ yoo ni anfani lati han nikan ti o ba tun ṣiṣẹ.
tooltip.disable()
Ti ṣiṣẹ toggle
Yipada agbara fun ohun elo irinṣẹ lati han tabi pamọ.
tooltip.toggleEnabled()
imudojuiwọn
Ṣe imudojuiwọn ipo ti ohun elo irinṣẹ eroja.
tooltip.update()
gbaInstance
Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ ọpa irinṣẹ ti o ni nkan ṣe pẹlu nkan DOM kan
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
gbaOrCreateInstance
Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ ọpa irinṣẹ ti o ni nkan ṣe pẹlu nkan DOM kan, tabi ṣẹda ọkan tuntun ni ọran ti ko ṣe ipilẹṣẹ
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Awọn iṣẹlẹ
Iru iṣẹlẹ | Apejuwe |
---|---|
show.bs.tooltip |
Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn show apẹẹrẹ ọna ti a npe ni. |
shown.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). |
hide.bs.tooltip |
Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hide apẹẹrẹ ti pe. |
hidden.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). |
inserted.bs.tooltip |
Iṣẹlẹ yii jẹ ina lẹhin show.bs.tooltip iṣẹlẹ naa nigbati awoṣe ọpa irinṣẹ ti ṣafikun si DOM. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()