Awọn imọran irinṣẹ

Akopọ

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

• Awọn imọran irinṣẹ gbarale 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.jseyiti 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 .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 inu ojiji DOM kan.

Ṣ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-toggleabuda 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ṣẹ:

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 ohun elo 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)

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

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

Lilo iṣẹ pẹlupopperConfig

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

Awọn ọna

ifihan

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

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.tooltipiṣẹlẹ naa to waye). Eyi ni a kà si “afọwọṣe” ti nfa ohun elo irinṣẹ.

tooltip.hide()

yipada

Yipada ohun elo itọsi irinṣẹ. 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ṣẹ.

tooltip.toggle()

sọnù

Fipamọ ati pa ohun elo irinṣẹ ohun elo 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 ) selectorko 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ẹ

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

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

tooltip.hide()