ምኽሪ መሳርሒታት

ሰነዳትን ኣብነታትን ንምውሳኽ ብሕታዊ ቡትስትራፕ መሳርሒታት ምስ CSSን ጃቫስክሪፕትን ብምጥቃም CSS3 ንኣኒሜሽንን ዳታ-bs-attributes ንከባብያዊ ኣርእስቲ መኽዘንን።

ኣብዚ ገጽ

ሓፈሻዊ ትሕዝቶ

ነቲ tooltip plugin ክትጥቀመሉ ከለኻ ክትፈልጦም ዘለካ ነገራት፤

ምኽሪ መሳርሒታት ንኣቀማምጣ ኣብ ሳልሳይ ወገን ቤተ-መጻሕፍቲ ፖፐር ይምርኮሱ ። ቅድሚ , 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 ተወሰኸ

መልክዕ ናይ መሳርሒታት ምኽሪ ተለዋዋጢ CSS ተጠቂምካ ክትቅይሮ ትኽእል ኢኻ ። data-bs-custom-class="custom-tooltip"ንባህላዊ መልክዕና ስፍሓት ንምሃብ ብሕታዊ ክፍሊ ምስ ንሰርዕን ንሓደ ሎካል CSS ተለዋዋጢ ንምግዳፍን ንጥቀመሉን።

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

ከምኡ’ውን ምስ ብሕታዊ ኤችቲኤምኤል ዝተወሰኸ፤

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

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

ኣብ v5.2.0 ተወሰኸ

ከም ኣካል ናይቲ ቡትስትራፕ ዝምዕብል ዘሎ CSS ተለዋዋጢ ኣቀራርባ፡ መሳርሒታት ሕጂ ንዝተማዕበለ .tooltipናይ ሓቂ ግዜ ምምዕርራይ ከባብያዊ CSS ተለዋዋጢ on ይጥቀሙ። ክብርታት ናይ 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};

ሳስ ተለዋዋጢ ረቛሒታት

$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

ኣጠቓቕማ

እቲ ናይ መሳርሒ ምኽሪ ፕላግ-ኢን ትሕዝቶን ምልክትን ብመሰረት ጠለብ የፍሪ፣ ብነባሪ ድማ ድሕሪ እቲ መበገሲ ባእታኦም መተሓሳሰቢ መሳርሒታት የቐምጥ።

ነቲ ናይ መሳርሒ ምኽሪ ብመንገዲ ጃቫስክሪፕት ኣበግሶ፤

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

ምፍሳስን `auto`...`scroll`

መሳርሒ ምኽሪ ኣቀማምጣ ሓደ ወላዲ መትሓዚ ናትና ክህልዎ overflow: autoወይ overflow: scrollክፈትዎ ከሎ ብኣውቶማቲክ ክቕየር ይፍትን .table-responsive, ግን ሕጂ ውን ናይቲ መበቆላዊ ኣቀማምጣ ኣቀማምጣ ይሕሉ። ነዚ ንምፍታሕ፡ ነቲ boundaryኣማራጺ (ንእቲ popperConfigኣማራጺ ዝጥቀም ፍሊፕ መቐየሪ) ናብ ዝኾነ HTMLElement ኣቐምጦ ነቲ ነባሪ ዋጋ ንምግዳፍ 'clippingParents'፡ ፡ ከም document.body:

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

ምልክት ምግባር

ንሓደ መሳርሒ ምኽሪ ዘድሊ ምልክት dataባህሪ ጥራይ ኮይኑ titleኣብቲ HTML ባእታ ምኽሪ መሳርሒ ክህልወካ ትደሊ። እቲ ዝፍጠር ምልክት ናይ ሓደ መሳርሒ ምኽሪ ምናልባት ቀሊል እዩ፣ ዋላ እኳ ቦታ ዝሓትት እንተኾነ (ብነባሪ፣ topብፕላግ-ኢን ናብ ዝተቐመጠ)።

ንተጠቀምቲ ቁልፊ ሰሌዳን ሓጋዚ ቴክኖሎጅን መሳርሒታት ዝሰርሑ ምግባር

ኣብ HTML ባእታታት ብባህሊ ኣብ ሰሌዳ ቁልፊ ዘተኮሩን መስተጋብራዊ ዝኾኑን (ከም መላግቦታት ወይ ቁጽጽር ቅጥዒ) ጥራይ እዩ ምኽርታት መሳርሒታት ክትውስኽ ዘለካ። ዋላ እኳ ፍቓደኛታት ኤችቲኤምኤል ባእታታት (ከም <span>s) ነቲ ባህሪ ብምውሳኽ ትኹረት ዝገብሩ ክኾኑ እንተኽኣሉ 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 ጀሚሩ ኩሎም ኣካላት ንሓደ ፈተነ ዝተሓዝአ ዳታ ባህሪ ይድግፉ እዚ data-bs-configድማ ቀሊል ውቅር ኣካላት ከም JSON ሕብረ ቃላት ከዕቁብ ይኽእል። ሓደ ባእታ data-bs-config='{"delay":0, "title":123}'and data-bs-title="456"attributes ምስ ዝህልዎ፡ እቲ ናይ መወዳእታ titleዋጋ ክኸውን እዩ 456፡ እቶም ዝተፈላለዩ ዳታ ባህርያት ድማ ኣብ data-bs-config. ብተወሳኺ፡ ዝጸንሑ ባህርያት ዳታ ከም data-bs-delay='{"show":0,"hide":150}'.

ንጸጥታዊ ምኽንያታት እቶም sanitize, sanitizeFn, ከምኡውን allowListኣማራጺታት ባህርያት ዳታ ተጠቒምካ ክቐርቡ ከምዘይክእሉ ኣስተውዕል።

ሽም	ዓይነት	ትሑዝ	መግለፂ
`allowList`	ግኡዝ ነገር	ነባሪ ዋጋ	ዝተፈቕዱ ባህርያትን መለለዪታትን ዝሓዘ ነገር።
`animation`	ቡልያን ዝብል እዩ።	`true`	ኣብቲ መሳርሒ ምኽሪ ናይ CSS ምድምሳስ ምስግጋር ተግባራዊ ግበር።
`boundary`	ሕብረ ቃላት፣ ባእታ	`'clippingParents'`	ናይ ምፍሳስ ደረት ዶብ ናይቲ መሳርሒ ምኽሪ (ንናይ ፖፐር preventOverflow መቐየሪ ጥራይ እዩ ዝምልከት)። ብነባሪ መልክዑ `'clippingParents'`፡ HTMLElement መወከሲ እዩ (ብጃቫስክሪፕት ጥራይ ኣቢሉ) ክቕበል ይኽእልን ይኽእል። ንዝያዳ ሓበሬታ ኣብ Popper's detectOverflow docs ተወከሱ ።
`container`	ሕብረ ቃላት፡ ባእታ፡ ሓሶት።	`false`	ነቲ ናይ መሳርሒ ምኽሪ ናብ ሓደ ፍሉይ ባእታ ይውስኾ። ኣብነት `container: 'body'`፡ . እዚ ኣማራጺ ብፍላይ ጠቓሚ እዩ ምኽንያቱ ነቲ ጫፍ መሳርሒ ኣብ ዋሕዚ ናይቲ ሰነድ ኣብ ጥቓ እቲ መበገሲ ባእታ ከተቐምጦ ስለዘኽእለካ - እዚ ድማ እቲ ጫፍ መሳርሒ ኣብ እዋን ምቕያር ዓቐን መስኮት ካብቲ መበገሲ ባእታ ርሒቑ ከይንሳፈፍ ይከላኸል።
`customClass`	ሕብረ ቃላት፣ ተግባር	`''`	ኣብቲ መሳርሒ ምኽሪ ምስ ተራእየ ክፍልታት ምውሳኽ። እዞም ክፍልታት ኣብ ርእሲ ዝኾነ ኣብቲ ቅጥዒ ዝተገልጸ ክፍልታት ከም ዝውሰኹ ኣስተውዕል። ብዙሓት ክፍልታት ንምውሳኽ፡ ብነጥቢ ፍለዮም `'class-1 class-2'`፡ . ብተወሳኺ ተወሳኺ ኣስማት ክፍሊ ዝሓዘ ሓደ ሕብረ ቃላት ክመልስ ዘለዎ ፋንክሽን ክትሓልፍ ትኽእል ኢኻ።
`delay`	ቁጽሪ፡ ኣቕሓ	`0`	ምድንጓይ ምርኣይን ምሕባእን ምኽሪ መሳርሒ (ms)-ንዓይነት ማንዋል ትሪግር ኣይምልከትን እዩ። ቁጽሪ እንተተቐሪቡ፡ ምድንጓይ ኣብ ክልቲኡ ምሕባእ/ምርኣይ ይትግበር። ኣቃውማ ኣቕሓ `delay: { "show": 500, "hide": 100 }`፡ .
`fallbackPlacements`	ስርርዕ	`['top', 'right', 'bottom', 'left']`	ዝርዝር ኣቀማምጣታት ኣብ ስርርዕ (ብቅደም ተኸተል ምርጫ) ብምሃብ ፎልባክ ኣቀማምጣታት ምግላጽ። ንዝያዳ ሓበሬታ ኣብ ፖፐር ናይ ባህሪ ሰነዳት ተወከሱ ።
`html`	ቡልያን ዝብል እዩ።	`false`	ኣብቲ መሳርሒ ምኽሪ HTML ፍቐድ። ሓቂ እንተኾይኑ ኣብቲ tooltip's ዝርከቡ HTML tags ኣብቲ tooltip `title`ክቐርቡ እዮም። ሓሶት እንተኾይኑ `innerText`፡ ንብረት ናብ ዶም ትሕዝቶ ንምእታው ክውዕል እዩ። ብዛዕባ መጥቃዕቲ XSS እንተተጨኒቕካ ጽሑፍ ተጠቐም።
`offset`	ስርርዕ፣ ሕብረ ቃላት፣ ተግባር	`[0, 0]`	ምትዕርራይ ናይቲ መሳርሒ ምኽሪ ብተዛማዲ ምስቲ ዕላማኡ። ኣብ ዳታ ባህርያት ብኮማ ዝተፈላለዩ ክብርታት ከም: `data-bs-offset="10,20"`. ሓደ ፋንክሽን ነቲ ኦፍሴት ንምውሳን ክጥቀመሉ ከሎ፡ ከም ቀዳማይ ሞጎቱ፡ ፖፐር ኣቀማምጣ፡ መወከሲ፡ ፖፐር ሬክትስን ዝሓዘ ነገር ሒዙ ይጽዋዕ። እቲ መበገሲ ባእታ DOM node ከም ካልኣይ ሞጎተ ይሓልፍ። እቲ ፋንክሽን ክልተ ቁጽርታት ዘለዎ ስርዓት ክመልስ ኣለዎ: skidding , distance . ንዝያዳ ሓበሬታ ኣብ ፖፐር ኦፍሴት ዶክስ ተወከሱ ።
`placement`	ሕብረ ቃላት፣ ተግባር	`'top'`	ከመይ ጌርና ነቲ ቱልቲፕ ነቐምጦ: auto, top, bottom, left, right. ምስ `auto`ተገልጸ፡ ነቲ መሳርሒ ምኽሪ ብዳይናሚክ ዳግማይ ከቕንዖ እዩ። ሓደ ፋንክሽን ንኣቀማምጣ ንምውሳን ኣብ ዝጥቀመሉ እዋን፡ ቱልቲፕ DOM ኖድ ከም ቀዳማይ ሞጎተኡ፡ እቲ ትሪግሪንግ ኤለመንት DOM ኖድ ድማ ከም ካልኣይ ጌሩ ይጽዋዕ። እቲ `this`ዓውዲ ናብቲ ናይ መሳርሒ ምኽሪ ምሳሌ ይቕመጥ።
`popperConfig`	ባዶ፣ ነገር፣ ተግባር	`null`	ናይ ቡትስትራፕ ነባሪ ናይ ፖፐር ውቅር ንምቕያር፡ ናይ ፖፐር ውቅር ርአ ። ሓደ ፋንክሽን ንናይ ፖፐር ውቅር ንምፍጣር ክጥቀመሉ ከሎ፡ ብናይ ቡትስትራፕ ነባሪ ፖፐር ውቅር ዝሓዘ ነገር ይጽዋዕ። ነቲ ነባሪ ምስ ናይ ገዛእ ርእስኻ ውቅር ክትጥቀመሉን ክትወሃሃዶን ይሕግዘካ። እቲ ተግባር ንፖፐር ናይ ውቅር ነገር ክመልስ ኣለዎ።
`sanitize`	ቡልያን ዝብል እዩ።	`true`	ነቲ ሳኒታይዜሽን ምኽኣል ወይ ምዕጻው። If activated `'template'`, `'content'`ከምኡውን `'title'`ኣማራጺታት ሳኒታይዝ ክግበረሎም እዩ።
`sanitizeFn`	ባዶ፣ ተግባር	`null`	ኣብዚ ናይ ባዕልኻ ሳኒታይዝ ፋንክሽን ከተቕርብ ትኽእል ኢኻ። እዚ ንጽሬት ንምፍጻም ውፉይ ቤተ-መጻሕፍቲ ክትጥቀም እንተደሊኻ ጠቓሚ ክኸውን ይኽእል።
`selector`	ገመድ፣ ሓሶት።	`false`	ሓደ መምረጺ እንተተዋሂቡ፡ ናይ መሳርሒ ምኽሪ ነገራት ናብቶም ዝተገልጹ ዕላማታት ክውከሉ እዮም። ብተግባር እዚ ንመሳርሒታት ኣብ ዳይናሚክ ዝተወሰኹ DOM elements ( `jQuery.on`support) እውን ንምትግባር ይጥቀመሉ። ነዚ ጉዳይን መሃሪ ኣብነትን ርአ ።
`template`	ገመድ	`'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`	ንመሳርሒ ምኽሪ ክትፈጥር ከለኻ ክትጥቀመሉ እትደሊ HTML መሰረት ግበር። እቲ tooltip's `title`ኣብቲ `.tooltip-inner`. `.tooltip-arrow`ናይቲ መሳርሒ ፍላጻ ክኸውን እዩ። እቲ ደጋዊ ዝኾነ መጠቕለሊ ባእታ `.tooltip`ክፍሊን `role="tooltip"`.
`title`	ሕብረ ቃላት፣ ባእታ፣ ተግባር	`''`	`title`ባህሪ እንተዘይሃልዩ ነባሪ ዋጋ ኣርእስቲ ። ሓደ ፋንክሽን እንተተዋሂቡ `this`፡ መወከሲኡ ምስቲ ፖፖቨር ዝተተሓሓዘሉ ባእታ ተሰሪዑ ክጽዋዕ እዩ።
`trigger`	ገመድ	`'hover focus'`	ከመይ ጌሩ tooltip ይጅምር: ጠውቕ: ተንቀሳቐስ: ፎኮስ: ማንዋል። ብዙሓት መበገሲታት ክትሓልፍ ትኽእል ኢኻ፤ ብነጥቢ ፍለዮም። እቲ መሳርሒ ምኽሪ ብመንገዲ , and methods `'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 element ዝተዓቀበ ዳታ የወግድ)። ውክልና ዝጥቀሙ ምኽርታት መሳርሒታት ( እቲ `selector`ኣማራጺ ተጠቒሞም ዝፍጠሩ ) ኣብ ዘርኢ መበገሲ ባእታታት ብውልቂ ክጠፍኡ ኣይክእሉን።
`enable`	ናይ ሓደ ባእታ tooltip ናይ ምርኣይ ዓቕሚ ይህቦ። ምኽሪ መሳርሒታት ብነባሪ ይንቀሳቐሱ።
`getInstance`	ስታትቲክ ሜላ እዚ ድማ ነቲ ናይ መሳርሒ ምኽሪ ምሳሌ ምስ ሓደ DOM ባእታ ዝተኣሳሰር ክትረኽቦ ዘኽእለካ፣ ወይ ድማ እንተዘይተጀሚሩ ሓድሽ ክትፈጥር ዘኽእለካ።
`getOrCreateInstance`	ስታትቲክ ሜላ እዚ ድማ ነቲ ናይ መሳርሒ ምኽሪ ምሳሌ ምስ ሓደ DOM ባእታ ዝተኣሳሰር ክትረኽቦ ዘኽእለካ፣ ወይ ድማ እንተዘይተጀሚሩ ሓድሽ ክትፈጥር ዘኽእለካ።
`hide`	ናይ ሓደ ባእታ መሳርሒ ምኽሪ ይሓብእ። ቅድሚ እቲ መሳርሒ ምኽሪ ብጭቡጥ ምሕባኡ (ማለት ቅድሚ እቲ `hidden.bs.tooltip`ፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። እዚ ከም “ብኢድ” ምብጋስ ናይቲ መሳርሒ ምኽሪ ይቑጸር።
`setContent`	ድሕሪ ምጅማር ትሕዝቶ ናይቲ መሳርሒ ምኽሪ ዝቕይረሉ መንገዲ ይህብ።
`show`	ናይ ሓደ ባእታ መሳርሒ ምኽሪ ይገልጽ። ቅድሚ እቲ መሳርሒ ምኽሪ ብጭቡጥ ምርኣይ (ማለት ቅድሚ እቲ `shown.bs.tooltip`ፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። እዚ ከም “ብኢድ” ምብጋስ ናይቲ መሳርሒ ምኽሪ ይቑጸር። ዜሮ ንውሓት ዘለዎም ኣርእስታት ዘለዎም ምኽርታት መሳርሒታት ፈጺሞም ኣይርኣዩን እዮም።
`toggle`	ናይ ሓደ ባእታ መሳርሒ ምኽሪ ይቕይሮ። ቅድሚ እቲ መሳርሒ ምኽሪ ብጭቡጥ ምርኣይ ወይ ምሕባኡ (ማለት ቅድሚ እቲ `shown.bs.tooltip`ወይ `hidden.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፣ ኣብዚ ነፍሲ ወከፍ ንብረት-መፍትሕ ኣብ ውሽጢ እቲ ፖፖቨር ቅጥዒ ቅኑዕ stringመምረጺ እዩ፣ ነፍሲ ወከፍ ተዛማዲ ንብረት-ዋጋ ድማ string| element| function| null

ፍጻሜታት

ዝግጅት	መግለፂ
`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()

ምኽሪ መሳርሒታት

ሓፈሻዊ ትሕዝቶ

ኣብነታት

ምኽርታት መሳርሒታት ኣንቅሕ

ምኽሪ መሳርሒታት ኣብ ሊንክታት

ብሕታዊ መሳርሒታት ምኽርታት

ኣንፈታት

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

ሳስ ተለዋዋጢ ረቛሒታት

ኣጠቓቕማ

ምፍሳስን auto...scroll

ምልክት ምግባር

ንተጠቀምቲ ቁልፊ ሰሌዳን ሓጋዚ ቴክኖሎጅን መሳርሒታት ዝሰርሑ ምግባር

ስንኩላን ባእታታት

ኣማራጺታት

ንውልቃዊ ምኽርታት መሳርሒታት ዝኸውን ባህርያት ዳታ

ፋንክሽን ምስ ምጥቃምpopperConfig

ኣገባባት

ዘይተመዓራረዩ ኣገባባትን ምስግጋራትን።

ፍጻሜታት

ምፍሳስን `auto`...`scroll`

ፋንክሽን ምስ ምጥቃም`popperConfig`