የመሳሪያ ምክሮች

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

በዚህ ገጽ ላይ

አጠቃላይ እይታ

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

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

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

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

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

ምሳሌ፡ የመሳሪያ ምክሮችን በሁሉም ቦታ አንቃ

በአንድ ገጽ ላይ ያሉትን ሁሉንም የመሳሪያ ምክሮች የማስጀመር አንዱ መንገድ በባህሪያቸው መምረጥ data-bs-toggleነው፡-

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

ምሳሌዎች

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

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

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

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

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

ከSVG ጋር፡-

ሳስ

ተለዋዋጮች

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

አጠቃቀም

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

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

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

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

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

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

ምልክት ማድረጊያ

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

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

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

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

የተሰናከሉ አባሎች

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

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-bs-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-bs-animation=""። አማራጮችን በውሂብ ባሕሪያት በሚያልፉበት ጊዜ የአማራጭ ስም የጉዳይ አይነትን ከካሜል ኬዝ ወደ kebab-ኬዝ መቀየርዎን ያረጋግጡ። ለምሳሌ ከመጠቀም ይልቅ data-bs-customClass="beautifier"ይጠቀሙ data-bs-custom-class="beautifier"።

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

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

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

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

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

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

ዘዴዎች

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

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

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

አሳይ

የአንድ ንጥረ ነገር መሣሪያ ጫፍን ያሳያል። የመሳሪያ ጥቆማው በትክክል ከመታየቱ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል ። shown.bs.tooltipይህ የመሳሪያውን ጫፍ እንደ "በእጅ" ማነሳሳት ይቆጠራል. ዜሮ-ርዝመት አርእስቶች ያላቸው የመሳሪያ ምክሮች በጭራሽ አይታዩም።

tooltip.show()

መደበቅ

የአንድ ንጥረ ነገር መሣሪያ ጫፍን ይደብቃል። የመሳሪያ ጥቆማው በትክክል ከመደበቅ በፊት (ማለትም hidden.bs.tooltipክስተቱ ከመፈጠሩ በፊት) ወደ ደዋይ ይመለሳል። ይህ የመሳሪያውን ጫፍ እንደ "በእጅ" ማነሳሳት ይቆጠራል.

tooltip.hide()

ቀያይር

የአንድን ንጥረ ነገር መሣሪያ ጫፍ ይቀያይራል። የመሳሪያ ጥቆማው በትክክል ከመታየቱ ወይም ከመደበቅ በፊት (ማለትም ክስተቱ ከመፈጠሩ በፊት) ወደ ደዋዩ ይመለሳል ። ይህ የመሳሪያውን ጫፍ እንደ "በእጅ" ማነሳሳት ይቆጠራል.shown.bs.tooltiphidden.bs.tooltip

tooltip.toggle()

ማስወገድ

የአንድ ን��ረ ነገር መሣሪያ ጫፍን ይደብቃል እና ያጠፋል (በDOM አባል ላይ የተከማቸ ውሂብን ያስወግዳል)። የውክልና ጥቆማዎችን የሚጠቀሙ (አማራጩን በመጠቀም የተፈጠሩ ) selectorበተወለዱ ቀስቃሽ አካላት ላይ በተናጠል ሊጠፉ አይችሉም።

tooltip.dispose()

ማንቃት

የመታየት ችሎታ ለአንድ ንጥረ ነገር መሣሪያ ጫፍ ይሰጣል። የመሳሪያ ምክሮች በነባሪነት ነቅተዋል።

tooltip.enable()

አሰናክል

የአንድ ኤለመንት መሣሪያ ጫፍ የመታየት ችሎታን ያስወግዳል። የመሳሪያ ጥቆማው እንደገና ከነቃ ብቻ ነው መታየት የሚችለው።

tooltip.disable()

መቀያየር ነቅቷል።

የአንድ ንጥረ ነገር መሣሪያ ጫፍ የመታየት ወይም የመደበቅ ችሎታን ይቀያይራል።

tooltip.toggleEnabled()

አዘምን

የአንድ ንጥረ ነገር መሣሪያ ጫፍ ቦታን ያዘምናል።

tooltip.update()

getInstance

ከDOM ኤለመንት ጋር የተገናኘውን የመሳሪያ ምክር ምሳሌ እንድታገኝ የሚያስችል የማይንቀሳቀስ ዘዴ

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

getOrCreateInstance

ከDOM ኤለመንት ጋር የተገናኘውን የመሳሪያ ምክር ምሳሌ እንድታገኝ ወይም ካልተጀመረ አዲስ ለመፍጠር የሚያስችል የማይንቀሳቀስ ዘዴ

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

ክስተቶች

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

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

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

tooltip.hide()