የመሳሪያ ምክሮች

ለአካባቢያዊ የርዕስ ማከማቻ CSS3 ን ለአኒሜሽን እና ዳታ-ቢስ-ባህሪያትን በመጠቀም ብጁ የቡትስትራፕ የመሳሪያ ምክሮችን ከCSS እና JavaScript ጋር ለመጨመር ሰነዶች እና ምሳሌዎች።

በዚህ ገጽ ላይ

አጠቃላይ እይታ

የTooltip ፕለጊን ሲጠቀሙ ማወቅ ያለባቸው ነገሮች፡-

የመሳሪያ ምክሮች ለቦታ አቀማመጥ በሶስተኛ ወገን ቤተ-መጽሐፍት ፖፐር ላይ ይተማመናሉ ። ከዚህ በፊት popper.min.jsን ማካተት አለቦት bootstrap.jsወይም bootstrap.bundle.min.jsፖፐር የያዘውን ይጠቀሙ።
የመሳሪያ ምክሮች በአፈጻጸም ምክንያቶች መርጠው የገቡ ናቸው፣ ስለዚህ እነሱን እራስዎ ማስጀመር አለብዎት ።
ዜሮ-ርዝመት አርእስቶች ያላቸው የመሳሪያ ምክሮች በጭራሽ አይታዩም።
container: 'body'ይበልጥ ውስብስብ በሆኑ ክፍሎች (እንደ የግቤት ቡድኖቻችን፣ የአዝራር ቡድኖች፣ ወዘተ) ያሉ ችግሮችን ከመስጠት ለመዳን ይግለጹ ።
በተደበቁ አካላት ላይ ቀስቃሽ የመሳሪያ ምክሮች አይሰራም።
ለኤለመንቶች .disabledወይም ለኤለመንቶች የሚጠቅሙ ጥቆማዎች በማሸጊያ ኤለመንት disabledላይ መቀስቀስ አለባቸው።
ብዙ መስመሮችን ከሚሸፍኑ ሃይፐርሊንኮች ሲቀሰቀስ፣የመሳሪያ ምክሮች መሃል ይሆናሉ። ይህንን ባህሪ ለማስወገድ white-space: nowrap;በእርስዎ s ላይ ይጠቀሙ ።<a>
ተጓዳኝ አባላቶቻቸው ከDOM ከመወገዳቸው በፊት የመሳሪያ ምክሮች መደበቅ አለባቸው።
በጥላ DOM ውስጥ ላለ አካል ምስጋና ይግባው የመሳሪያ ምክሮች ሊነቃቁ ይችላሉ።

ያን ሁሉ አገኘህ? በጣም ጥሩ፣ ከአንዳንድ ምሳሌዎች ጋር እንዴት እንደሚሰሩ እንይ።

በነባሪ፣ ይህ አካል አብሮ የተሰራውን የይዘት ማጽጃ ይጠቀማል፣ ይህም በግልጽ ያልተፈቀዱትን የኤችቲኤምኤል ኤለመንቶችን ያስወግዳል። ለበለጠ ዝርዝር የጃቫ ስክሪፕት ሰነዶቻችን የንፅህና መጠበቂያ ክፍልን ይመልከቱ።

የዚህ አካል አኒሜሽን ተጽእኖ prefers-reduced-motionበመገናኛ ብዙሃን ጥያቄ ላይ የተመሰረተ ነው. የእኛን የተደራሽነት ሰነድ የተቀነሰውን እንቅስቃሴ ክፍል ይመልከቱ ።

ምሳሌዎች

የመሳሪያ ምክሮችን አንቃ

ከላይ እንደተጠቀሰው, ጥቅም ላይ ከመዋሉ በፊት የመሳሪያ ምክሮችን ማስጀመር አለብዎት. በገጽ ላይ ያሉትን ሁሉንም የመሳሪያ ምክሮች የማስጀመር አንዱ መንገድ በባህሪያቸው መምረጥ ነው data-bs-toggle፡-

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

በአገናኞች ላይ ጠቃሚ ምክሮች

የመሳሪያ ምክሮችን ለማየት ከታች ባሉት ማገናኛዎች ላይ ያንዣብቡ፡-

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>

በኤችቲኤምኤልዎ ውስጥ titleአንዱን ለመጠቀም ነፃነት ይሰማዎ። data-bs-titleጥቅም ላይ በሚውልበት ጊዜ ፖፐር ንጥረ ነገሩ በሚሰራበት ጊዜ titleበራስ-ሰር ይተካዋል ።data-bs-title

ብጁ የመሳሪያ ምክሮች

በ v5.2.0 ውስጥ ተጨምሯል

የሲኤስኤስ ተለዋዋጮችን በመጠቀም የመሳሪያ ምክሮችን ገጽታ ማበጀት ይችላሉ ። ብጁ መደብ data-bs-custom-class="custom-tooltip"አዘጋጀን ብጁ መልካችንን እና የአካባቢን የሲኤስኤስ ተለዋዋጭ ለመሻር እንጠቀምበታለን።

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

አቅጣጫዎች

አራቱን የመሳሪያ ምክሮችን ለማየት ከታች ባሉት አዝራሮች ላይ አንዣብብ፡ ከላይ፣ ቀኝ፣ ታች እና ግራ። በ RTL ውስጥ Bootstrapን ሲጠቀሙ አቅጣጫዎች ይንፀባርቃሉ።

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

እና በብጁ HTML ታክሏል፡-

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

ከSVG ጋር፡-

CSS

ተለዋዋጮች

በ v5.2.0 ውስጥ ተጨምሯል

እንደ የ Bootstrap የ CSS ተለዋዋጮች አቀራረብ አካል፣ የመሳሪያ ምክሮች አሁን .tooltipለተሻሻለ የአሁናዊ ማበጀት የአካባቢያዊ CSS ተለዋዋጮችን ይጠቀማሉ። የCSS ተለዋዋጮች እሴቶች በ Sass በኩል ተቀናብረዋል፣ ስለዚህ Sass ማበጀት አሁንም ይደገፋል።

  --#{$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};

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

አጠቃቀም

የ Tooltip ፕለጊን ይዘትን ያመነጫል እና በፍላጎት ላይ ምልክት ያደርጋል፣ እና በነባሪነት የመሳሪያ ምክሮችን ከቀስቀሳቸው ኤለመንት በኋላ ያስቀምጣል።

በጃቫስክሪፕት በኩል የመሳሪያውን ጥቆማ ያስነሱ፡

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

የተትረፈረፈ `auto`እና`scroll`

የመሳሪያ ጥቆማ ቦታ የወላጅ መያዣ የእኛን ሲይዝ overflow: autoወይም overflow: scrollሲወድ በራስ ሰር ለመለወጥ ይሞክራል .table-responsive፣ ነገር ግን አሁንም የመጀመሪያውን አቀማመጥ ያስቀምጣል። ይህንን ለመፍታት፣ ነባሪውን ዋጋ ለመሻር አማራጩን boundary( አማራጩን ተጠቅመው ለ Flip ማስተካከያ ) ወደ ማንኛውም HTMLElement ያቀናብሩ ፣ ለምሳሌpopperConfig'clippingParents'document.body

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

ምልክት ማድረጊያ

ለመሳሪያ ጫፍ የሚፈለገው ምልክት ማድረጊያ dataባህሪ ብቻ ነው እና titleበኤችቲኤምኤል ኤለመንት ላይ የመሳሪያ ጥቆማ እንዲኖርዎት ይፈልጋሉ። የመነጨው የመሳሪያ ጫፍ ቀላል ነው፣ ምንም እንኳን ቦታ ቢፈልግም (በነባሪ፣ topበተሰኪው የተቀናበረ)።

የመሳሪያ ምክሮችን ለቁልፍ ሰሌዳ እና አጋዥ ቴክኖሎጂ ተጠቃሚዎች እንዲሰራ ማድረግ

በተለምዶ በቁልፍ ሰሌዳ-ተኮር እና በይነተገናኝ (እንደ ማገናኛዎች ወይም የቅጽ መቆጣጠሪያዎች) ወደ ኤችቲኤምኤል ክፍሎች የመሳሪያ ምክሮችን ማከል አለብዎት። ምንም እንኳን የዘፈቀደ የኤችቲኤምኤል ኤለመንቶች (እንደ <span>ዎች ያሉ) ባህሪውን በመጨመር ትኩረት እንዲሰጡ ማድረግ ቢቻልም tabindex="0"፣ ይህ ግን ለቁልፍ ሰሌዳ ተጠቃሚዎች መስተጋብራዊ ባልሆኑ አካላት ላይ ሊያበሳጩ እና ግራ የሚያጋቡ የትር ማቆሚያዎችን ይጨምራል፣ እና አብዛኛዎቹ አጋዥ ቴክኖሎጂዎች በአሁኑ ጊዜ በዚህ ሁኔታ የመሳሪያውን ምክሮች አያሳውቁም። በተጨማሪም፣ ለመሳሪያ ጥቆማዎ እንደ ቀስቅሴ ብቻ hoverአይተማመኑ፣ ምክንያቱም ይህ የመሳሪያ ምክሮች ለቁልፍ ሰሌዳ ተጠቃሚዎች መቀስቀስ የማይቻል ያደርገዋል።

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

የተሰናከሉ አባሎች

ባህሪው ያላቸው ንጥረ ነገሮች disabledበይነተገናኝ አይደሉም፣ ይህም ማለት ተጠቃሚዎች የመሳሪያ ምክሮችን (ወይም ብቅ-ባይ) ለመቀስቀስ ማተኮር፣ ማንዣበብ ወይም ጠቅ ማድረግ አይችሉም። እንደ መፍትሄ፣ የመሳሪያውን ጫፍ ከጥቅል <div>ወይም <span>በቁልፍ ሰሌዳው ላይ የሚያተኩር በመጠቀም ማስነሳት ይፈልጋሉ 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>

አማራጮች

አማራጮች በውሂብ ባህሪያት ወይም በጃቫ ስክሪፕት ሊተላለፉ ስለሚችሉ፣ በ ውስጥ እንዳለ የአማራጭ ስም ወደ ላይ ማከል data-bs-ይችላሉ data-bs-animation="{value}"። በመረጃ ባህሪያት በኩል አማራጮችን ሲያስተላልፉ የአማራጭ ስም የጉዳይ አይነትን ከ " camelcase " ወደ " kebab-case " መቀየርዎን ያረጋግጡ. ለምሳሌ, data-bs-custom-class="beautifier"በምትኩ ይጠቀሙ data-bs-customClass="beautifier".

ከ Bootstrap 5.2.0 ጀምሮ፣ ሁሉም አካላት ቀላል የአካል ክፍሎችን እንደ JSON string ውቅረት ሊያስቀምጥ የሚችል በሙከራ የተያዘ የውሂብ ባህሪን ይደግፋሉ። data-bs-configአንድ ኤለመንት ሲኖረው data-bs-config='{"delay":0, "title":123}'እና data-bs-title="456"ባህሪያቱ ሲኖረው፣ የመጨረሻው titleእሴት ይሆናል 456እና የተለዩ የውሂብ ባህሪያት በ ላይ የተሰጡ እሴቶችን ይሽራሉ data-bs-config። በተጨማሪም፣ ነባር የውሂብ ባህሪያት እንደ JSON ያሉ እሴቶችን ማኖር ይችላሉ data-bs-delay='{"show":0,"hide":150}'።

ለደህንነት ሲባል፣፣ sanitizeእና sanitizeFnአማራጮች allowListየውሂብ ባህሪያትን በመጠቀም ሊቀርቡ እንደማይችሉ ልብ ይበሉ።

ስም	ዓይነት	ነባሪ	መግለጫ
`allowList`	ነገር	ነባሪ እሴት	የተፈቀዱ ባህሪያትን እና መለያዎችን የያዘ ነገር።
`animation`	ቡሊያን	`true`	የ CSS ደብዝዝ ሽግግር ወደ መሳሪያ ጫፍ ተግብር።
`boundary`	ሕብረቁምፊ, ኤለመንት	`'clippingParents'`	የመሳሪያው ጫፍ የትርፍ ፍሰት ገደብ ወሰን (የሚመለከተው ለፖፐር ከመጠን በላይ ፍሰት መቀየሪያን ብቻ ነው)። በነባሪ፣ `'clippingParents'`HTMLElement ማጣቀሻ ነው እና መቀበል ይችላል (በጃቫ ስክሪፕት ብቻ)። ለበለጠ መረጃ የፖፐርን ማወቂያ ከመጠን በላይ ፍሰት ሰነዶችን ይመልከቱ ።
`container`	ሕብረቁምፊ፣ አባል፣ ሐሰት	`false`	የመሳሪያውን ጫፍ ከአንድ የተወሰነ አካል ጋር ያያይዙታል። ምሳሌ `container: 'body'`፡. ይህ አማራጭ በተለይ ጠቃሚ ነው, ይህም የመሳሪያውን ጫፍ በማስነሻ አካል አቅራቢያ በሰነዱ ፍሰት ውስጥ እንዲያስቀምጡ ያስችልዎታል - ይህም የመሳሪያውን ጫፍ በመስኮት መጠን በሚቀይርበት ጊዜ ከሚቀሰቀሰው አካል ላይ እንዳይንሳፈፍ ይከላከላል.
`customClass`	ሕብረቁምፊ, ተግባር	`''`	በሚታይበት ጊዜ ክፍሎችን ወደ መሳሪያ ጫፍ ያክሉ። እነዚህ ክፍሎች በአብነት ውስጥ ከተገለጹት ክፍሎች በተጨማሪ እንደሚጨመሩ ልብ ይበሉ። ብዙ ክፍሎችን ለመጨመር በክፍተቶች ይለያቸዋል `'class-1 class-2'`፡. እንዲሁም ተጨማሪ የክፍል ስሞችን የያዘ ነጠላ ሕብረቁምፊ መመለስ ያለበትን ተግባር ማለፍ ይችላሉ።
`delay`	ቁጥር, እቃ	`0`	የመሳሪያውን ጫፍ (ms) ማሳየት እና መደበቅ መዘግየት - በእጅ ቀስቅሴ አይነት ላይ አይተገበርም። ቁጥር ከቀረበ፣ መዘግየት በሁለቱም መደበቅ/ማሳየት ላይ ይተገበራል። የነገር መዋቅር ነው `delay: { "show": 500, "hide": 100 }`፡.
`fallbackPlacements`	ድርድር	`['top', 'right', 'bottom', 'left']`	በድርድር (በምርጫ ቅደም ተከተል) የተቀመጡ ቦታዎችን ዝርዝር በማቅረብ የኋላ ኋላ ምደባዎችን ይግለጹ። ለበለጠ መረጃ የፖፐር ባህሪ ሰነዶችን ይመልከቱ ።
`html`	ቡሊያን	`false`	ኤችቲኤምኤል በመሳሪያ ፍንጭ ውስጥ ፍቀድ። እውነት ከሆነ፣ በመሳሪያ ጥቆማው ውስጥ ያሉ የኤችቲኤምኤል መለያዎች በመሳሪያ ጥቆማው ውስጥ `title`ይቀርባሉ። ውሸት ከሆነ `innerText`ንብረቱ ወደ DOM ይዘት ለማስገባት ስራ ላይ ይውላል። ስለ XSS ጥቃቶች የሚጨነቁ ከሆነ ጽሑፍ ይጠቀሙ።
`offset`	ድርድር፣ ሕብረቁምፊ፣ ተግባር	`[0, 0]`	ከዒላማው አንጻር የመሳሪያውን ጫፍ ማካካሻ። `data-bs-offset="10,20"`በመረጃ ባህሪያት ውስጥ ሕብረቁምፊን በነጠላ ሰረዝ የተለያዩ እሴቶች ማለፍ ይችላሉ አንድ ተግባር ማካካሻውን ለመወሰን ጥቅም ላይ በሚውልበት ጊዜ እንደ መጀመሪያው መከራከሪያ ፖፐር አቀማመጥ, ማጣቀሻ እና ፖፐር rects ከያዘ ነገር ጋር ይባላል. ቀስቃሽ ኤለመንት DOM ኖድ እንደ ሁለተኛው ነጋሪ እሴት ተላልፏል። ተግባሩ ከሁለት ቁጥሮች ጋር ድርድር መመለስ አለበት: መንሸራተት , ርቀት . ለበለጠ መረጃ የፖፐር ማካካሻ ሰነዶችን ይመልከቱ ።
`placement`	ሕብረቁምፊ, ተግባር	`'top'`	የመሳሪያውን ጫፍ እንዴት እንደሚቀመጥ: ራስ-ሰር, የላይኛው, ታች, ግራ, ቀኝ. ሲገለጽ `auto`፣የመሳሪያውን ጫፍ በተለዋዋጭ አቅጣጫ ያዞራል። አንድ ተግባር ቦታውን ለመወሰን ጥቅም ላይ ሲውል ከመሳሪያ ጫፍ DOM node ጋር እንደ መጀመሪያው መከራከሪያ እና ቀስቃሽ ኤለመንት DOM ኖድ እንደ ሁለተኛው ይባላል። ዐውደ- ጽሑፉ `this`የተቀናበረው በመሳሪያ ምክር ምሳሌ ላይ ነው።
`popperConfig`	ባዶ ፣ ነገር ፣ ተግባር	`null`	የ Bootstrapን ነባሪ የፖፕ አወቃቀሩን ለመቀየር የፖፐርን አወቃቀር ይመልከቱ ። አንድ ተግባር የፖፐር ውቅረትን ለመፍጠር ጥቅም ላይ ሲውል የቡትስትራፕ ነባሪ የፖፐር ውቅረት ካለው ዕቃ ጋር ይጠራል። ነባሪውን ከራስዎ ውቅር ጋር እንዲጠቀሙ እና እንዲያዋህዱ ያግዝዎታል። ተግባሩ ለፖፐር የውቅር ነገር መመለስ አለበት።
`sanitize`	ቡሊያን	`true`	ንጽህናን አንቃ ወይም አሰናክል። ከነቃ `'template'`እና አማራጮች ይጸዳሉ `'content'`።`'title'`
`sanitizeFn`	ባዶ ፣ ተግባር	`null`	እዚህ የራስዎን የንፅህና አገልግሎት መስጠት ይችላሉ. የንፅህና አጠባበቅን ለማከናወን የተለየ ቤተ-መጽሐፍት ለመጠቀም ከመረጡ ይህ ጠቃሚ ሊሆን ይችላል።
`selector`	ሕብረቁምፊ፣ ሐሰት	`false`	መራጭ ከቀረበ፣የመሳሪያ ምክር ነገሮች ለተገለጹት ኢላማዎች ይላካሉ። በተግባር፣ ይህ በተለዋዋጭ ለተጨመሩ DOM አካላት ( `jQuery.on`ድጋፍ) የመሳሪያ ምክሮችን ተግባራዊ ለማድረግም ያገለግላል። ይህንን እትም እና መረጃ ሰጭ ምሳሌ ይመልከቱ ።
`template`	ሕብረቁምፊ	`'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`	የመሳሪያውን ጫፍ በሚፈጥሩበት ጊዜ ለመጠቀም HTML መሰረት ያድርጉ። የመሳሪያው `title`ጫፍ ወደ ውስጥ ይገባል `.tooltip-inner`. `.tooltip-arrow`የመሳሪያው ጫፍ ቀስት ይሆናል። በጣም ውጫዊው የመጠቅለያ ክፍል `.tooltip`ክፍሉ እና ሊኖረው ይገባል `role="tooltip"`.
`title`	ሕብረቁምፊ፣ አካል፣ ተግባር	`''`	ባህሪው ከሌለ ነባሪ የርዕስ ዋጋ `title`። አንድ ተግባር ከተሰጠ `this`ፖፑቨር ከተገጠመለት ንጥረ ነገር ጋር በማጣቀሻው ይጠራል.
`trigger`	ሕብረቁምፊ	`'hover focus'`	የመሳሪያ ጥቆማ እንዴት እንደሚቀሰቀስ፡ ጠቅ ያድርጉ፣ ማንዣበብ፣ ትኩረት፣ መመሪያ። ብዙ ቀስቅሴዎችን ማለፍ ይችላሉ; ከቦታ ጋር ይለያዩዋቸው. የመሳሪያው ጫፍ በ , እና ዘዴዎች `'manual'`በፕሮግራም እንደሚቀሰቀስ ያመለክታል ; ይህ ዋጋ ከሌላ ቀስቅሴ ጋር ሊጣመር አይችልም. በራሱ በቁልፍ ሰሌዳው በኩል ሊነሱ የማይችሉ የመሳሪያ ምክሮችን ያስከትላል, እና ጥቅም ላይ መዋል ያለበት ለቁልፍ ሰሌዳ ተጠቃሚዎች ተመሳሳይ መረጃ ለማስተላለፍ አማራጭ ዘዴዎች ካሉ ብቻ ነው.`.tooltip('show').tooltip('hide').tooltip('toggle')'hover'`

ለግል የመሳሪያ ምክሮች የውሂብ ባህሪያት

ከላይ እንደተገለፀው ለነጠላ የመሳሪያ ምክሮች አማራጮች በመረጃ ባህሪያት አጠቃቀም በኩል ሊገለጹ ይችላሉ.

ተግባርን በመጠቀም`popperConfig`

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

ዘዴዎች

ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች

ሁሉም የኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግር ይጀምራሉ ። ሽግግሩ እንደተጀመረ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ። በተጨማሪም, በመሸጋገሪያ አካል ላይ የሚደረግ ዘዴ ጥሪ ችላ ይባላል .

ለበለጠ መረጃ የእኛን ጃቫስክሪፕት ሰነድ ይመልከቱ ።

ዘዴ	መግለጫ
`disable`	የአንድ ኤለመንት መሣሪያ ጫፍ የመታየት ችሎታን ያስወግዳል። የመሳሪያ ጥቆማው እንደገና ከነቃ ብቻ ነው መታየት የሚችለው።
`dispose`	የአንድ ንጥረ ነገር መሣሪያ ጫፍን ይደብቃል እና ያጠፋል (በDOM አባል ላይ የተከማቸ ውሂብን ያስወግዳል)። የውክልና ጥቆማዎችን የሚጠቀሙ (አማራጩን በመጠቀም የተፈጠሩ ) `selector`በተወለዱ ቀስቃሽ አካላት ላይ በተናጠል ሊጠፉ አይችሉም።
`enable`	የመታየት ችሎታ ለአንድ ንጥረ ነገር መሣሪያ ጫፍ ይሰጣል። የመሳሪያ ምክሮች በነባሪነት ነቅተዋል።
`getInstance`	ከDOM ኤለመንት ጋር የተጎዳኘውን የመሳሪያ ምክር ምሳሌ ለማግኘት ወይም ካልተጀመረ አዲስ ለመፍጠር የሚያስችል የማይንቀሳቀስ ዘዴ።
`getOrCreateInstance`	ከDOM ኤለመንት ጋር የተጎዳኘውን የመሳሪያ ምክር ምሳሌ ለማግኘት ወይም ካልተጀመረ አዲስ ለመፍጠር የሚያስችል የማይንቀሳቀስ ዘዴ።
`hide`	የአንድ ንጥረ ነገር መሣሪያ ጫፍን ይደብቃል። የመሳሪያ ጥቆማው በትክክል ከመደበቅ በፊት (ማለትም `hidden.bs.tooltip`ክስተቱ ከመፈጠሩ በፊት) ወደ ደዋይ ይመለሳል። ይህ የመሳሪያውን ጫፍ እንደ "በእጅ" ማነሳሳት ይቆጠራል.
`setContent`	ከጅማሬው በኋላ የመሳሪያውን ይዘት ለመለወጥ መንገድ ይሰጣል።
`show`	የአንድ ንጥረ ነገር መሣሪያ ጫፍን ያሳያል። የመሳሪያ ጥቆማው በትክክል ከመታየቱ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል ። `shown.bs.tooltip`ይህ የመሳሪያውን ጫፍ እንደ "በእጅ" ማነሳሳት ይቆጠራል. ዜሮ-ርዝመት አርእስቶች ያላቸው የመሳሪያ ምክሮች በጭራሽ አይታዩም።
`toggle`	የአንድን ንጥረ ነገር መሣሪያ ጫፍ ይቀያይራል። የመሳሪያ ጥቆማው በትክክል ከመታየቱ ወይም ከመደበቅ በፊት (ማለትም ክስተቱ ከመፈጠሩ በፊት) ወደ ደዋዩ ይመለሳል ። ይህ የመሳሪያውን ጫፍ እንደ "በእጅ" ማነሳሳት ይቆጠራል.`shown.bs.tooltiphidden.bs.tooltip`
`toggleEnabled`	የአንድ ንጥረ ነገር መሣሪያ ጫፍ የመታየት ወይም የመደበቅ ችሎታን ይቀያይራል።
`update`	የአንድ ንጥረ ነገር መሣሪያ ጫፍ ቦታን ያዘምናል።

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

ዘዴው ክርክርን setContentይቀበላል ፣ እያንዳንዱ የንብረት ቁልፍ በፖፖቨር አብነት ውስጥ objectትክክለኛ መራጭ ሲሆን እያንዳንዱ ተዛማጅ ንብረት-እሴት ሊሆን ይችላል | | | stringstringelementfunctionnull

ክስተቶች

ክስተት	መግለጫ
`hide.bs.tooltip`	`hide`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
`hidden.bs.tooltip`	ይህ ክስተት የሚቀጣጠለው ብቅ-ባይ ከተጠቃሚው ተደብቆ ሲያልቅ ነው (የ CSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
`inserted.bs.tooltip`	`show.bs.tooltip`የመሳሪያ ምክር አብነት ወደ DOM ከተጨመረ ይህ ክስተት ከክስተቱ በኋላ ተቃጥሏል።
`show.bs.tooltip`	`show`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
`shown.bs.tooltip`	ይህ ክስተት የሚቀጣጠለው ብቅ-ባይ ለተጠቃሚው እንዲታይ ሲደረግ ነው (የ CSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()

የመሳሪያ ምክሮች

አጠቃላይ እይታ

ምሳሌዎች

የመሳሪያ ምክሮችን አንቃ

በአገናኞች ላይ ጠቃሚ ምክሮች

ብጁ የመሳሪያ ምክሮች

አቅጣጫዎች

CSS

ተለዋዋጮች

Sass ተለዋዋጮች

አጠቃቀም

የተትረፈረፈ autoእናscroll

ምልክት ማድረጊያ

የመሳሪያ ምክሮችን ለቁልፍ ሰሌዳ እና አጋዥ ቴክኖሎጂ ተጠቃሚዎች እንዲሰራ ማድረግ

የተሰናከሉ አባሎች

አማራጮች

ለግል የመሳሪያ ምክሮች የውሂብ ባህሪያት

ተግባርን በመጠቀምpopperConfig

ዘዴዎች

ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች

ክስተቶች

የተትረፈረፈ `auto`እና`scroll`

ተግባርን በመጠቀም`popperConfig`