ፖፖቨርስ ዝበሃል እዩ።

ሰነዳትን ኣብነታትን ን Bootstrap popovers ዝኣመሰሉ ኣብ iOS ዝርከቡ ኣብ ዝኾነ ባእታ ኣብ መርበብ ሓበሬታኻ ንምውሳኽ።

ኣብዚ ገጽ

ሓፈሻዊ ትሕዝቶ

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

ፖፖቨርስ ንኣቀማምጣ ኣብ 3ይ ወገን ቤተ መጻሕፍቲ ፖፐር ይምርኮሱ ። ቅድሚ bootstrap.js popper.min.js ከተካትት ኣለካ ወይ ድማ ፖፐር ዝሓዘ bootstrap.bundle.min.js/ ክትጥቀም ኣለካ poppers bootstrap.bundle.jsንኽሰርሕ!
ፖፖቨርስ ከም ጽግዕተኛነት ነቲ ናይ መሳርሒ ቲፕ ፕላግ-ኢን የድልዮ።
ፖፖቨርስ ብናይ ኣፈጻጽማ ምኽንያታት opt-in እዮም፣ ስለዚ ባዕልኻ ክትጅምሮም ኣለካ .
ዜሮ-ንውሓትን titleክብርታትን contentፖፖቨር ፈጺሙ ኣየርእዩን እዮም።
container: 'body'ኣብ ዝያዳ ዝተሓላለኹ ኣካላት (ከም ናይ ምእታው ጉጅለታትና፣ ናይ መጠወቒ ጉጅለታት ወዘተ) ጸገማት ምቕራብ ንኸይፍጠር ምግላጽ ።
ኣብ ሕቡእ ባእታታት ፖፖቨርስ ምብጋስ ኣይሰርሕን እዩ።
ፖፖቨርስ ን .disabledወይ disabledባእታታት ኣብ መጠቕለሊ ባእታ ክብገስ ኣለዎ።
ካብቶም ኣብ ብዙሕ መስመራት ዝጠቕልሉ መልህቕ ክብገሱ ከለዉ፡ ፖፖቨርስ ኣብ መንጎ ሓፈሻዊ ስፍሓት ናይቶም መልህቕ ማእከል ክኾኑ እዮም። ካብዚ ባህሪ ንምውጋድ .text-nowrapኣብ sካ ተጠቐም ።<a>
ፖፖቨርስ ቅድሚ ተዛመድቲ ባእታታቶም ካብ ዶም ምእላዮም ክሕብኡ ኣለዎም።
ሳላ ኣብ ውሽጢ ጽላሎት DOM ዝርከብ ባእታ ፖፖቨርስ ክብገስ ይኽእል።

ብነባሪ እዚ ክፍሊ እዚ ነቲ ኣብ ውሽጡ ዝተሃንጸ ናይ ትሕዝቶ ሳኒታይዘር ይጥቀም፣ እዚ ድማ ዝኾነ ብግልጺ ዘይተፈቕደ ናይ ኤችቲኤምኤል ባእታታት ይገፍፍ። ንዝያዳ ዝርዝር ሓበሬታ ኣብ ሰነዳት ጃቫስክሪፕትና ኣብ ክፍሊ ሳኒታይዘር ርአ ።

ናይዚ ኣካል ተንቀሳቓሲ ውጽኢት ኣብቲ ናይ prefers-reduced-motionሚድያ ሕቶ ዝምርኮስ እዩ። ኣብቲ ናይ ተበጻሕነት ሰነድና ኣብቲ ዝተቐነሰ ምንቅስቓስ ዝብል ክፍሊ ርአ ።

ፖፖቨርስ ምስ ገለ ኣብነታት ከመይ ከም ዝሰርሑ ንምርኣይ ንባብኩም ቀጽሉ።

ኣብነት፡ ኣብ ኩሉ ቦታ ፖፖቨርስ ምኽኣል

ሓደ ካብቲ ንኹሎም ኣብ ሓደ ገጽ ዝርከቡ ፖፖቨርስ ንምጅማር ዝሕግዝ መንገዲ ብባህርያቶም ምምራጽ ምኾነ data-bs-toggle፤

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

ኣብነት፡ ነቲ `container`ኣማራጺ ምጥቃም

containerኣብ ሓደ ወላዲ ባእታ ገለ ቅዲታት ምስ ፖፖቨር ዝዕንቅፉ ምስ ዝህልዉኻ ፡ ኣብ ክንዲ ናይቲ ፖፖቨር ኤችቲኤምኤል ኣብ ውሽጢ እቲ ባእታ ንኽረአ ፡ ሓደ ብሕታዊ ክትገልጽ ክትደሊ ኢኻ ።

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

ኣብነት

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

ኣርባዕተ ኣንፈታት

ኣርባዕተ ኣማራጺታት ኣለዉ፡ ላዕለዋይ፡ የማን፡ ታሕተዋይን ጸጋምን ተሰሪዖም። ኣብ RTL Bootstrap ኣብ እንጥቀመሉ እዋን ኣንፈታት ይንጸባረቑ።

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

ኣብ ዝቕጽል ጠውቂ ምብራር

ነቲ focusትሪግር ተጠቒምካ ኣብቲ ተጠቃሚ ዝቕጽል ጠውቂ ናይቲ ካብቲ ናይ ምቕያር ባእታ ዝተፈልየ ባእታ ንዝመጽእ ፖፖቨርስ ንምብራር ተጠቐም።

ን dismiss-on-next-click ፍሉይ ምልክት ምግባር የድሊ

ንግቡእ መስቀላዊ-መርበብ ሓበሬታን ስግረ-መድረኽን ባህሪ፡ መለለዪ ዘይኮነስ መለለዪ ክትጥቀም ኣለካ <a>፡ ከምኡ’ውን ባህሪ<button> ከተካትት ኣለካ tabindex።

ካብ ስራሕ ዝእለ ፖፖቨር

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

ስንኩላን ባእታታት

እቲ ባህሪ ዘለዎም ባእታታት disabledመስተጋብራዊ ኣይኮኑን፣ ማለት ተጠቀምቲ ንፖፖቨር (ወይ tooltip) ንምብጋስ ክሕንብሱ ወይ ጠዊቖም ክገብሩ ኣይክእሉን እዮም። ከም መፍትሒ፡ ነቲ ፖፖቨር ካብ መጠቕለሊ <div>ወይ ክትጅምሮ ክትደሊ ኢኻ <span>፡ ብዝበለጸ ፡ ተጠቒምካ ቁልፊ ሰሌዳ-ትኹረት ዝገብር ጌርካ ዝተሰርሐ tabindex="0"።

data-bs-trigger="hover focus"ንዝተሰናኸሉ ፖፖቨር ትሪግርስ ፡ እቲ ፖፖቨር ንተጠቀምትኻ ከም ቅጽበታዊ ስእላዊ ግብረ መልሲ ንኽረአ እውን ክትመርጽ ትኽእል ኢኻ ፡ ምኽንያቱ ኣብ ሓደ ስንኩል ባእታ ክጥውቑ ዘይጽበዩ ክኾኑ ይኽእሉ።

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

ሳስ

ተለዋዋጢ ረቛሒታት

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

ኣጠቓቕማ

ብመንገዲ ጃቫስክሪፕት ፖፖቨርስ ኣንቅሕ፤

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

ፖፖቨርስ ንተጠቀምቲ ቁልፊ ሰሌዳን ሓጋዚ ቴክኖሎጅን ክሰርሑ ምግባር

ተጠቀምቲ ቁልፊ ሰሌዳ ንፖፖቨርካ ከንቀሳቕሱ ንምፍቃድ፡ ኣብቶም ብባህሊ ኣብ ሰሌዳ ቁልፊ ዘተኮሩን መስተጋብራዊ ዝኾኑን ባእታታት ኤችቲኤምኤል ጥራይ ኢኻ ክትውስኾም ዘለካ (ከም መላግቦታት ወይ ቁጽጽር ቅጥዒ)። ዋላ እኳ ፍቓደኛታት ኤችቲኤምኤል ባእታታት (ከም <span>s) ነቲ ባህሪ ብምውሳኽ ትኹረት ዝገብሩ ክኾኑ እንተኽኣሉ tabindex="0"፡ እዚ ንተጠቀምቲ ቁልፊ ሰሌዳ ኣብ ዘይመተሓላለፍቲ ባእታታት ከሕርቑን ከደናግሩን ዝኽእሉ ናይ ትብ ስቶፕ ክውስኽ እዩ፡ መብዛሕትኦም ሓገዝቲ ቴክኖሎጂታት ድማ ኣብዚ እዋን እዚ ኣብዚ ኩነታት ትሕዝቶ ናይቲ ፖፖቨር ኣይእውጁን እዮም። . ብተወሳኺ፡ ንፖፖቨርስካ ከም መበገሲ ጥራይ ኣይትጽጋዕ hover፡ እዚ ንተጠቀምቲ ቁልፊ ሰሌዳ ንኽጅምር ዘይከኣል ስለ ዝገብሮ።

ሃብታምን ቅርጺ ዘለዎን ኤችቲኤምኤል ኣብ ፖፖቨርስ ምስቲ ኣማራጺ ከተእቱ ትኽእል እኳ እንተኾንካ html፡ ካብ መጠን ንላዕሊ ትሕዝቶ ካብ ምውሳኽ ክትቁጠብ ኣትሪርና ንመክር። ኣብዚ እዋን’ዚ ፖፖቨርስ ዝሰርሑሉ ኣገባብ፡ ሓንሳብ ምስ ተራእዩ፡ ትሕዝቶኦም ምስቲ aria-describedbyባህሪ ዘለዎ ትሪግር ባእታ ይተሓሓዝ። ከም ውጽኢቱ ድማ፡ ምሉእ ትሕዝቶ ናይቲ ፖፖቨር ንሓጋዚ ቴክኖሎጂ ከም ሓደ ነዊሕን ዘይተቛረጸን ዋሕዚ ክግለጽ እዩ።

ብተወሳኺ፡ ኣብ ፖፖቨርካ መስተጋብራዊ ቁጽጽር (ከም ባእታታት ቅጥዒ ወይ መላግቦታት) እውን ከተካትት ዝከኣል እኳ እንተኾነ (ነዞም ባእታታት ናብቲ allowListናይ ዝፍቀዱ ባህርያትን መለለዪታትን ብምውሳኽ)፡ ኣብዚ እዋን እዚ እቲ ፖፖቨር ስርዓት ትኹረት ቁልፊ ሰሌዳ ከምዘየመሓድር ኣስተውዕል። ሓደ ተጠቃሚ ቁልፊ ሰሌዳ ፖፖቨር ክኸፍት ከሎ፡ ትኹረት ኣብቲ መበገሲ ባእታ ይተርፍ፡ እቲ ፖፖቨር መብዛሕትኡ ግዜ ኣብ ኣቃውማ ናይቲ ሰነድ ነቲ መበገሲ ብቕጽበት ስለዘይስዕቦ፡ ንቕድሚት/ምጽቃጥ ውሕስነት የለንTABንሓደ ተጠቃሚ ቁልፊ ሰሌዳ ናብቲ ፖፖቨር ባዕሉ ከግዕዞ እዩ። ብሓጺሩ፡ ኣብ ሓደ ፖፖቨር መስተጋብራዊ ቁጽጽር ምውሳኽ ጥራይ፡ ነዞም ቁጽጽራት ንተጠቀምቲ ቁልፊ ሰሌዳን ተጠቀምቲ ሓገዝቲ ቴክኖሎጂታትን ዘይብጻሕ/ዘይጥቀመሎም ክገብሮም ተኽእሎ ኣሎ፡ ወይ ድማ እንተወሓደ ስነ-መጐታዊ ዘይኮነ ሓፈሻዊ ትኹረት ትእዛዝ ክፈጥር ተኽእሎ ኣሎ። ኣብ ከምዚ ኩነታት ኣብ ክንዲ ሞዳል ዝርርብ ምጥቃም ኣብ ግምት ኣእቱ።

ኣማራጺታት

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

ዳታ ባህርያት ንውልቀ ፖፖቨርስ

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

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

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

ኣገባባት

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

ኩሎም ናይ ኤፒኣይ ሜላታት ዘይተመዓራረዩ ኮይኖም ምስግጋር ይጅምሩ ። እቲ ምስግጋር ምስ ተጀመረ ግን ከኣ ቅድሚ ምውድኡ ናብቲ ደዋሊ ይምለሱ ። ብተወሳኺ፡ ኣብ ሓደ መሰጋገሪ ኣካል ዝግበር ናይ ሜላ ጻውዒት ዕሽሽ ክበሃል እዩ .

ንዝያዳ ሓበሬታ ኣብ ሰነድ ጃቫስክሪፕትና ርአ ።

አርኢ

ናይ ሓደ ባእታ ፖፖቨር ይገልጽ። ቅድሚ እቲ ፖፖቨር ብጭቡጥ ምርኣይ (ማለት ቅድሚ እቲ shown.bs.popoverፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። እዚ ድማ ከም “ብኢድ” ምብጋስ ናይቲ ፖፖቨር ይቑጸር። ኣርእስቶምን ትሕዝቶኦምን ክልቲኦም ዜሮ ንውሓት ዘለዎም ፖፖቨርስ ፈጺሞም ኣይርኣዩን እዮም።

myPopover.show()

ተሓባእ

ናይ ሓደ ባእታ ፖፖቨር ይሓብእ። እቲ ፖፖቨር ብጭቡጥ ቅድሚ ምሕባኡ (ማለት ቅድሚ እቲ hidden.bs.popoverፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። እዚ ድማ ከም “ብኢድ” ምብጋስ ናይቲ ፖፖቨር ይቑጸር።

myPopover.hide()

toggle ምግባር

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

myPopover.toggle()

ምጉሓፍ

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

myPopover.dispose()

ኣኽእል

ናይ ሓደ ባእታ ፖፖቨር ናይ ምርኣይ ዓቕሚ ይህቦ። ፖፖቨርስ ብነባሪ ይንቀሳቐሱ።

myPopover.enable()

ስንኩል

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

myPopover.disable()

toggleEnabled ዝብል ጽሑፍ ኣሎ።

ናይ ሓደ ባእታ ፖፖቨር ንኽርአ ወይ ንኽሕባእ ዘለዎ ዓቕሚ ይቕይሮ።

myPopover.toggleEnabled()

ኣዘምን

ናይ ሓደ ባእታ ፖፖቨር ኣቀማምጣ የዘምን።

myPopover.update()

getInstance ዝብል ጽሑፍ ኣሎ።

ምስ ሓደ DOM element ዝተኣሳሰር popover instance ክትረክብ ዘኽእለካ Static method

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

getOrCreateInstance ዝብል ጽሑፍ ኣሎ።

ስታትቲክ ሜላ እዚ ድማ ነቲ popover instance ምስ DOM element ዝተኣሳሰር ክትረኽቦ ዘኽእለካ፣ ወይ ድማ እንተዘይተጀሚሩ ሓድሽ ክትፈጥር ዘኽእለካ

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

ፍጻሜታት

ዓይነት ፍጻመ	መግለፂ
show.bs.popover ዝብል ጽሑፍ ኣሎ።	`show`እዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
ተራእዩ.bs.popover	እዚ ክስተት ዝትኮስ እቲ ፖፖቨር ንተጠቃሚ ርኡይ ምስ ዝኸውን እዩ (CSS ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)።
hide.bs.popover ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ እዚ እቲ ናይ `hide`ምሳሌ ሜላ ምስ ተጸውዐ ብቕጽበት ይትኮስ።
ሕቡእ.ብስ.ድኻ	እዚ ክስተት ዝትኮስ እቲ ፖፖቨር ካብ ተጠቃሚ ምሕባእ ምስ ወድአ እዩ (CSS ምስግጋር ክሳብ ዝዛዘም ክጽበ እዩ)።
ኣእትዩ.bs.popover ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ ድሕሪ እቲ `show.bs.popover`ፍጻመ ዝስጎግ እቲ popover template ኣብ DOM ምስ ተወሰኸ እዩ።

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})