ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
in English

ምኽሪ መሳርሒታት

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

ሓፈሻዊ ትሕዝቶ

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

  • ምኽሪ መሳርሒታት ንኣቀማምጣ ኣብ 3ይ ወገን ቤተ መጻሕፍቲ ፖፐር ይምርኮሱ ። ቅድሚ bootstrap.js popper.min.js ከተካትት ኣለካ ወይ ድማ bootstrap.bundle.min.js/ ክትጥቀም ኣለካ እዚ ድማ Popper 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>

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

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

ኣጠቓቕማ

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

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
ምፍሳስን auto...scroll

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  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" 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="". ነቶም ኣማራጺታት ብመንገዲ ባህርያት ዳታ ክትሓልፍ ከለኻ፡ ዓይነት ኬዝ ናይቲ ስም ኣማራጺ ካብ camelCase ናብ kebab-case ምቕያርካ ኣረጋግጽ። ንኣብነት ኣብ ክንዲ ንጥቀም 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

ኣብቲ መሳርሒ ምኽሪ HTML ፍቐድ።

ሓቂ እንተኾይኑ ኣብቲ tooltip's ዝርከቡ HTML tags ኣብቲ tooltip titleክቐርቡ እዮም። ሓሶት እንተኾይኑ innerText፡ ንብረት ናብ ዶም ትሕዝቶ ንምእታው ክውዕል እዩ።

ብዛዕባ መጥቃዕቲ XSS እንተተጨኒቕካ ጽሑፍ ተጠቐም።

placement ሕብረ ቃላት | ተግባር 'top'

ከመይ ጌርና ን tooltip - auto | ላዕለዋይ ክፋል | ታሕተዋይ ክፋል | ጸጋም | ትኽክል.
ምስ autoተገልጸ፡ ነቲ መሳርሒ ምኽሪ ብዳይናሚክ ዳግማይ ኣንፈት ክህቦ እዩ።

ሓደ ፋንክሽን ንኣቀማምጣ ንምውሳን ኣብ ዝጥቀመሉ እዋን፡ ቱልቲፕ DOM ኖድ ከም ቀዳማይ ሞጎተኡ፡ እቲ ትሪግሪንግ ኤለመንት DOM ኖድ ድማ ከም ካልኣይ ጌሩ ይጽዋዕ። እቲ thisዓውዲ ናብቲ ናይ መሳርሒ ምኽሪ ምሳሌ ይቕመጥ።

selector ሕብረ ቃላት | ሓሶት false ሓደ መምረጺ እንተተዋሂቡ፡ ናይ መሳርሒ ምኽሪ ነገራት ናብቶም ዝተገልጹ ዕላማታት ክውከሉ እዮም። ብተግባር እዚ ንመሳርሒታት ኣብ ዳይናሚክ ዝተወሰኹ DOM elements ( jQuery.onsupport) እውን ንምትግባር ይጥቀመሉ። ነዚን መሃሪ ኣብነትን ርአ ።
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 ይጅምር - | ጠውቕ hover | ትኹረት | ናይ ኢድ. ብዙሓት መበገሲታት ክትሓልፍ ትኽእል ኢኻ፤ ብነጥቢ ፍለዮም።

'manual'.show()እቲ መሳርሒ ምኽሪ ብመንገዲ , .hide()and .toggle()methods ብፕሮግራም ከም ዝጅምር የመልክት ፤ እዚ ዋጋ ምስ ዝኾነ ካልእ መበገሲ ክውሃሃድ ኣይክእልን።

'hover'ንባዕሉ ብመንገዲ ቁልፊ ሰሌዳ ክብገስ ዘይክእል ምኽርታት መሳርሒታት ከስዕብ እዩ፣ ንተጠቀምቲ ሰሌዳ ቁልፊ ተመሳሳሊ ሓበሬታ ንምትሕልላፍ ኣማራጺ ሜላታት ምስ ዝህሉ ጥራይ ድማ ክጥቀመሉ ይግባእ።

fallbackPlacements ስርርዕ ['top', 'right', 'bottom', 'left'] ዝርዝር ኣቀማምጣታት ኣብ ስርርዕ (ብቅደም ተኸተል ምርጫ) ብምሃብ ፎልባክ ኣቀማምጣታት ምግላጽ። ንዝያዳ ሓበሬታ ኣብ ፖፐር ናይ ባህሪ ዶክስ ተወከሱ
boundary ሕብረ ቃላት | ባእታ 'clippingParents' ናይ ምፍሳስ ደረት ዶብ ናይቲ መሳርሒ ምኽሪ (ንናይ ፖፐር preventOverflow መቐየሪ ጥራይ እዩ ዝምልከት)። ብነባሪ 'clippingParents'HTMLElement መወከሲ እዩ (ብጃቫስክሪፕት ጥራይ ኣቢሉ) ክቕበል ይኽእልን ይኽእል። ንዝያዳ ሓበሬታ ኣብ Popper's detectOverflow docs ተወከሱ ።
customClass ሕብረ ቃላት | ተግባር ''

ኣብቲ መሳርሒ ምኽሪ ምስ ተራእየ ክፍልታት ምውሳኽ። እዞም ክፍልታት ኣብ ርእሲ ዝኾነ ኣብቲ ቅጥዒ ዝተገልጸ ክፍልታት ከም ዝውሰኹ ኣስተውዕል። ብዙሓት ክፍልታት ንምውሳኽ፡ ብነጥቢ ፍለዮም 'class-1 class-2'፡ .

ብተወሳኺ ተወሳኺ ኣስማት ክፍሊ ዝሓዘ ሓደ ሕብረ ቃላት ክመልስ ዘለዎ ፋንክሽን ክትሓልፍ ትኽእል ኢኻ።

sanitize ቡልያን ዝብል እዩ። true ነቲ ሳኒታይዜሽን ምኽኣል ወይ ምዕጻው። እንተተነቒሉን 'template'ኣማራጺታት 'title'ሳኒታይዝ ክግበረሎም እዩ። ኣብ ሰነድ ጃቫስክሪፕትና ዝርከብ ክፍሊ ሳኒታይዘር ርአ ።
allowList ግኡዝ ነገር ነባሪ ዋጋ ዝተፈቕዱ ባህርያትን መለለዪታትን ዝሓዘ ነገር
sanitizeFn ባዶ | ተግባር null ኣብዚ ናይ ባዕልኻ ሳኒታይዝ ፋንክሽን ከተቕርብ ትኽእል ኢኻ። እዚ ንጽሬት ንምፍጻም ውፉይ ቤተ-መጻሕፍቲ ክትጥቀም እንተደሊኻ ጠቓሚ ክኸውን ይኽእል።
offset ስርዓት | ሕብረ ቃላት | ተግባር [0, 0]

ምትዕርራይ ናይቲ መሳርሒ ምኽሪ ብተዛማዲ ምስቲ ዕላማኡ። ኣብ ዳታ ባህርያት ብኮማ ዝተፈላለዩ ክብርታት ከምዚ ዝኣመሰለ ሕብረ ቃላት ክትሓልፍ ትኽእል ኢኻ፤data-bs-offset="10,20"

ሓደ ፋንክሽን ነቲ ኦፍሴት ንምውሳን ክጥቀመሉ ከሎ፡ ከም ቀዳማይ ሞጎቱ፡ ፖፐር ኣቀማምጣ፡ መወከሲ፡ ፖፐር ሬክትስን ዝሓዘ ነገር ሒዙ ይጽዋዕ። እቲ መበገሲ ባእታ DOM node ከም ካልኣይ ሞጎተ ይሓልፍ። እቲ ፋንክሽን ክልተ ቁጽርታት ዘለዎ ስርዓት ክመልስ ኣለዎ ፡ .[skidding, distance]

ንዝያዳ ሓበሬታ ኣብ ፖፐር ኦፍሴት ዶክስ ተወከሱ ።

popperConfig ባዶ | ኣቕሓ | ተግባር null

ናይ ቡትስትራፕ ነባሪ ናይ ፖፐር ውቅር ንምቕያር፡ ናይ ፖፐር ውቅር ርአ ።

ሓደ ፋንክሽን ንናይ ፖፐር ውቅር ንምፍጣር ክጥቀመሉ ከሎ፡ ብናይ ቡትስትራፕ ነባሪ ፖፐር ውቅር ዝሓዘ ነገር ይጽዋዕ። ነቲ ነባሪ ምስ ናይ ገዛእ ርእስኻ ውቅር ክትጥቀመሉን ክትወሃሃዶን ይሕግዘካ። እቲ ተግባር ንፖፐር ናይ ውቅር ነገር ክመልስ ኣለዎ።

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

ኣማራጺታት ንውልቃዊ ምኽርታት መሳርሒታት ብኣማራጺ ብመንገዲ ኣጠቓቕማ ባህርያት ዳታ ክግለጹ ይኽእሉ፣ ከምቲ ኣብ ላዕሊ ዝተገልጸ።

ፋንክሽን ምስ ምጥቃም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()

toggle ምግባር

ናይ ሓደ ባእታ መሳርሒ ምኽሪ ይቕይሮ። ቅድሚ እቲ መሳርሒ ምኽሪ ብጭቡጥ ምርኣይ ወይ ምሕባኡ (ማለት ቅድሚ እቲ shown.bs.tooltipወይ hidden.bs.tooltipፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። እዚ ከም “ብኢድ” ምብጋስ ናይቲ መሳርሒ ምኽሪ ይቑጸር።

tooltip.toggle()

ምጉሓፍ

ናይ ሓደ ባእታ መሳርሒ ምኽሪ ይሓብእን የጥፍእን (ኣብ DOM element ዝተዓቀበ ዳታ የወግድ)። ውክልና ዝጥቀሙ ምኽርታት መሳርሒታት ( እቲ selectorኣማራጺ ተጠቒሞም ዝፍጠሩ ) ኣብ ዘርኢ መበገሲ ባእታታት ብውልቂ ክጠፍኡ ኣይክእሉን።

tooltip.dispose()

ኣኽእል

ናይ ሓደ ባእታ tooltip ናይ ምርኣይ ዓቕሚ ይህቦ። ምኽሪ መሳርሒታት ብነባሪ ይንቀሳቐሱ።

tooltip.enable()

ስንኩል

ናይ ሓደ ባእታ መሳርሒ ምኽሪ ንኽርአ ዘለዎ ዓቕሚ የወግድ። እቲ መሳርሒ ምኽሪ ዳግማይ ምስ ዝኽፈት ጥራይ እዩ ክረአ ዝኽእል።

tooltip.disable()

toggleEnabled ዝብል ጽሑፍ ኣሎ።

ናይ ሓደ ባእታ መሳርሒ ምኽሪ ንኽርአ ወይ ንኽሕባእ ዘለዎ ዓቕሚ ይቕይሮ።

tooltip.toggleEnabled()

ኣዘምን

ናይ ሓደ ባእታ መሳርሒ ምኽሪ ኣቀማምጣ የዘምን።

tooltip.update()

getInstance ዝብል ጽሑፍ ኣሎ።

ምስ ሓደ DOM element ዝተኣሳሰር tooltip instance ክትረክብ ዘኽእለካ ስታቲክ ሜላ

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