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

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

ኣብዚ ገጽ

ሓፈሻዊ ትሕዝቶ

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

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

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

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

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

ኣብነታት

ፖፖቨርስ ኣንቅሕ

ከምቲ ኣብ ላዕሊ ዝተጠቕሰ ቅድሚ ምጥቃምካ ፖፖቨርስ ክትጅምሮ ኣለካ። ሓደ መንገዲ ንኹሎም ፖፖቨርስ ኣብ ሓደ ገጽ ንምጅማር፡ ብባህርያቶም ምምራጽ ምኾነ data-bs-toggle፡ ከምዚ፤

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

ቀጥታዊ ዲሞ

ነዚ ዝስዕብ ቀጥታዊ ፖፖቨር ንምቕራብ ምስቲ ኣብ ላዕሊ ዘሎ ቁንጣሮ ጽሑፍ ዝመሳሰል ጃቫስክሪፕት ንጥቀም። ኣርእስታት ብመንገዲ ይቕመጡ data-bs-titleትሕዝቶ ኣካላት ድማ ብመንገዲ ይቕመጡ data-bs-content።

titleሓደ ወይ ኣብ ኤችቲኤምኤልካ ክትጥቀመሉ ናጻ ትኸውን data-bs-title። መዓስ titleኣብ ጥቕሚ ይውዕል፡ ፖፐር ብኣውቶማቲክ በቲ data-bs-titleእቲ ባእታ መዓስ ከም ዝቐርብ ይትክኦ።

html ዝብል ጽሑፍ ኣሎ።

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

ኣርባዕተ ኣንፈታት

ኣርባዕተ ኣማራጺታት ኣለዉ፡ ላዕለዋይ፡ የማን፡ ታሕተዋይን ጸጋምን። ኣብ RTL Bootstrap ኣብ እንጥቀመሉ እዋን ኣንፈታት ይንጸባረቑ። data-bs-placementኣንፈት ንምቕያር ኣቐምጥ ።

html ዝብል ጽሑፍ ኣሎ።

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

ቅቡል ልምዲ`container`

containerኣብ ሓደ ወላዲ ባእታ ገለ ቅዲታት ምስ ፖፖቨር ዝዕንቅፉ ምስ ዝህልዉኻ ፡ ኣብ ክንዲ ናይቲ ፖፖቨር ኤችቲኤምኤል ኣብ ውሽጢ እቲ ባእታ ንኽረአ ፡ ሓደ ብሕታዊ ክትገልጽ ክትደሊ ኢኻ ። እዚ ኣብ ምላሽ ዝህቡ ሰደቓታት፡ እታዎታት ጉጅለታትን ካልእ ከምኡ ዝኣመሰለን ልሙድ እዩ።

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

ካልእ ግሉጽ ልምዲ ከተቐምጥ እትደልየሉ ኩነታት ኣብ containerውሽጢ ሞዳል ዝርርብ ፖፖቨርስ እዮም , እቲ ፖፖቨር ባዕሉ ኣብቲ ሞዳል ከም ዝተተሓሓዘ ንምርግጋጽ። እዚ ብፍላይ ነቶም መስተጋብራዊ ባእታታት ዝሓዙ ፖፖቨርስ ኣገዳሲ እዩ - ሞዳል ዝርርባት ፎኮስ ክሕዙ እዮም፣ ስለዚ እቲ ፖፖቨር ውላድ ባእታ ናይቲ ሞዳል እንተዘይኮይኑ፣ ተጠቀምቲ ነዞም መስተጋብራዊ ባእታታት ከተኩሩ ወይ ከንቀሳቕሱ ኣይክእሉን እዮም።

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

ብሕታዊ ፖፖቨርስ

ኣብ v5.2.0 ተወሰኸ

መልክዕ ፖፖቨርስ CSS ተለዋዋጢ ተጠቂምካ ክትቅይሮ ትኽእል ኢኻ ። data-bs-custom-class="custom-popover"ንባህላዊ መልክዕና ስፍሓት ንምሃብን ንገለ ካብቶም ናይ ከባቢ CSS ተለዋዋጢ ረቛሒታት ንምግዳፍን ንጥቀመሉን ብሕታዊ ክፍሊ ምስ ንሰርዕ ።

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

html ዝብል ጽሑፍ ኣሎ።

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

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

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

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

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

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

html ዝብል ጽሑፍ ኣሎ።

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

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

ስንኩላን ባእታታት

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

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

html ዝብል ጽሑፍ ኣሎ።

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

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

ኣብ v5.2.0 ተወሰኸ

ከም ኣካል ናይቲ ቡትስትራፕ ዝምዕብል ዘሎ CSS ተለዋዋጢ ኣቀራርባ፡ ፖፖቨርስ ሕጂ ንዝተማዕበለ .popoverናይ ሓቂ ግዜ ምምዕርራይ ከባብያዊ CSS ተለዋዋጢ on ይጥቀሙ። ክብርታት ናይ CSS ተቐያየርቲ ብመንገዲ Sass ይቕመጡ፣ ስለዚ Sass ምምዕርራይ ጌና ይድገፍ እዩ፣ ንሱ እውን።

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);

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

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

ኣጠቓቕማ

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

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

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

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

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

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

ኣማራጺታት

ኣማራጺታት ብባህርያት ዳታ ወይ ጃቫስክሪፕት ክሓልፉ ስለ ዝኽእሉ 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'`፡ . እዚ ኣማራጺ ብፍላይ ጠቓሚ እዩ ምኽንያቱ ነቲ ፖፖቨር ኣብ ዋሕዚ ናይቲ ሰነድ ኣብ ጥቓ እቲ መበገሲ ባእታ ከተቐምጦ ስለዘኽእለካ - እዚ ድማ ኣብ እዋን ምቕያር ዓቐን መስኮት እቲ ፖፖቨር ካብቲ መበገሲ ባእታ ከይንሳፈፍ ይከላኸል።
`content`	ሕብረ ቃላት፣ ባእታ፣ ተግባር	`''`	`data-bs-content`ባህሪ እንተዘይሃልዩ ነባሪ ዋጋ ትሕዝቶ ። ሓደ ፋንክሽን እንተተዋሂቡ `this`፡ መወከሲኡ ምስቲ ፖፖቨር ዝተተሓሓዘሉ ባእታ ተሰሪዑ ክጽዋዕ እዩ።
`customClass`	ሕብረ ቃላት፣ ተግባር	`''`	ኣብቲ ፖፖቨር ምስ ተራእየ ክፍልታት ወስኹሉ። እዞም ክፍልታት ኣብ ርእሲ ዝኾነ ኣብቲ ቅጥዒ ዝተገልጸ ክፍልታት ከም ዝውሰኹ ኣስተውዕል። ብዙሓት ክፍልታት ንምውሳኽ፡ ብነጥቢ ፍለዮም `'class-1 class-2'`፡ . ተወሳኺ ኣስማት ክፍሊ ዝሓዘ ሓደ ሕብረ ቃላት ክመልስ ዘለዎ ፋንክሽን እውን ክትሓልፍ ትኽእል ኢኻ።
`delay`	ቁጽሪ፡ ኣቕሓ	`0`	ምድንጓይ ምርኣይን ምሕባእን ፖፖቨር (ms)-ንዓይነት ማንዋል ትሪግር ኣይምልከትን እዩ። ቁጽሪ እንተተቐሪቡ፡ ምድንጓይ ኣብ ክልቲኡ ምሕባእ/ምርኣይ ይትግበር። ኣቃውማ ኣቕሓ `delay: { "show": 500, "hide": 100 }`፡ .
`fallbackPlacements`	ሕብረ ቃላት፣ ስርርዕ	`['top', 'right', 'bottom', 'left']`	ዝርዝር ኣቀማምጣታት ኣብ ስርርዕ (ብቅደም ተኸተል ምርጫ) ብምሃብ ፎልባክ ኣቀማምጣታት ምግላጽ። ንዝያዳ ሓበሬታ ኣብ ፖፐር ናይ ባህሪ ሰነዳት ተወከሱ ።
`html`	ቡልያን ዝብል እዩ።	`false`	ኣብቲ ፖፖቨር ኤችቲኤምኤል ፍቐድ። ሓቂ እንተኾይኑ ኣብቲ popover's ዝርከቡ HTML tags ኣብቲ popover `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`ዓውዲ ናብቲ popover instance ይቕመጥ።
`popperConfig`	ባዶ፣ ነገር፣ ተግባር	`null`	ናይ ቡትስትራፕ ነባሪ ናይ ፖፐር ውቅር ንምቕያር፡ ናይ ፖፐር ውቅር ርአ ። ሓደ ፋንክሽን ንናይ ፖፐር ውቅር ንምፍጣር ክጥቀመሉ ከሎ፡ ብናይ ቡትስትራፕ ነባሪ ፖፐር ውቅር ዝሓዘ ነገር ይጽዋዕ። ነቲ ነባሪ ምስ ናይ ገዛእ ርእስኻ ውቅር ክትጥቀመሉን ክትወሃሃዶን ይሕግዘካ። እቲ ተግባር ንፖፐር ናይ ውቅር ነገር ክመልስ ኣለዎ።
`sanitize`	ቡልያን ዝብል እዩ።	`true`	ነቲ ሳኒታይዜሽን ምኽኣል ወይ ምዕጻው። If activated `'template'`, `'content'`ከምኡውን `'title'`ኣማራጺታት ሳኒታይዝ ክግበረሎም እዩ።
`sanitizeFn`	ባዶ፣ ተግባር	`null`	ኣብዚ ናይ ባዕልኻ ሳኒታይዝ ፋንክሽን ከተቕርብ ትኽእል ኢኻ። እዚ ንጽሬት ንምፍጻም ውፉይ ቤተ-መጻሕፍቲ ክትጥቀም እንተደሊኻ ጠቓሚ ክኸውን ይኽእል።
`selector`	ገመድ፣ ሓሶት።	`false`	ሓደ መምረጺ እንተተዋሂቡ፡ ፖፖቨር ነገራት ናብቶም ዝተገልጹ ዕላማታት ክውከሉ እዮም። ብተግባር እዚ ንፖፖቨርስ ኣብ ዳይናሚክ ዝተወሰኹ DOM elements ( `jQuery.on`support) እውን ንምትግባር ይጥቀመሉ። ነዚ ጉዳይን መሃሪ ኣብነትን ርአ ።
`template`	ገመድ	`'<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'`	ነቲ ፖፖቨር ክትፈጥር ከለኻ ክትጥቀመሉ እትደሊ HTML መሰረት ግበር። እቲ ፖፖቨርስ `title`ኣብቲ `.popover-inner`. `.popover-arrow`ፍላጻ ናይቲ ፖፖቨር ክኸውን እዩ። እቲ ደጋዊ ዝኾነ መጠቕለሊ ባእታ `.popover`ክፍሊን `role="popover"`.
`title`	ሕብረ ቃላት፣ ባእታ፣ ተግባር	`''`	`title`ባህሪ እንተዘይሃልዩ ነባሪ ዋጋ ኣርእስቲ ። ሓደ ፋንክሽን እንተተዋሂቡ `this`፡ መወከሲኡ ምስቲ ፖፖቨር ዝተተሓሓዘሉ ባእታ ተሰሪዑ ክጽዋዕ እዩ።
`trigger`	ገመድ	`'hover focus'`	ፖፖቨር ብኸመይ ይብገስ: ጠውቕ: ተንቀሳቐስ: ፎኮስ: ማንዋል። ብዙሓት መበገሲታት ክትሓልፍ ትኽእል ኢኻ፤ ብነጥቢ ፍለዮም። `'manual'`እቲ ፖፖቨር ብፕሮግራም ብመንገዲ `.popover('show')`, `.popover('hide')`and `.popover('toggle')`methods ከም ዝጅምር የመልክት፤ እዚ ዋጋ ምስ ዝኾነ ካልእ መበገሲ ክውሃሃድ ኣይክእልን። `'hover'`ንባዕሉ ብመንገዲ ቁልፊ ሰሌዳ ክብገስ ዘይክእል ፖፖቨርስ ከስዕብ እዩ፣ ንተጠቀምቲ ቁልፊ ሰሌዳ ተመሳሳሊ ሓበሬታ ንምትሕልላፍ ኣማራጺ ሜላታት ምስ ዝህሉ ጥራይ ድማ ክጥቀመሉ ይግባእ።

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

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

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

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

ኣገባባት

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

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

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

ሜላ	መግለፂ
`disable`	ናይ ሓደ ባእታ ፖፖቨር ንኽርአ ዘለዎ ዓቕሚ የወግድ። እቲ ፖፖቨር ዳግማይ ምስ ዝኽፈት ጥራይ እዩ ክረአ ዝኽእል።
`dispose`	ናይ ሓደ ባእታ ፖፖቨር ይሓብእን የጥፍእን (ኣብ DOM ባእታ ዝተዓቀበ ዳታ የወግድ)። ውክልና ዝጥቀሙ ፖፖቨርስ ( እቲ `selector`ኣማራጺ ተጠቒሞም ዝፍጠሩ ) ኣብ ዘርኢ መበገሲ ባእታታት ብውልቂ ክጠፍኡ ኣይክእሉን።
`enable`	ናይ ሓደ ባእታ ፖፖቨር ናይ ምርኣይ ዓቕሚ ይህቦ። ፖፖቨርስ ብነባሪ ይንቀሳቐሱ።
`getInstance`	ምስ ሓደ DOM element ዝተኣሳሰር popover instance ክትረክብ ዘኽእለካ Static method።
`getOrCreateInstance`	ምስ ሓደ DOM ባእታ ዝተኣሳሰር popover instance ክትረክብ ዘኽእለካ ስታትቲክ ሜላ፣ ወይ ድማ እንተዘይተጀሚሩ ሓድሽ ክትፈጥር ዘኽእለካ።
`hide`	ናይ ሓደ ባእታ ፖፖቨር ይሓብእ። እቲ ፖፖቨር ብጭቡጥ ቅድሚ ምሕባኡ (ማለት ቅድሚ እቲ `hidden.bs.popover`ፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። እዚ ድማ ከም “ብኢድ” ምብጋስ ናይቲ ፖፖቨር ይቑጸር።
`setContent`	ድሕሪ ምጅማር ትሕዝቶ ናይቲ ፖፖቨር ዝቕይረሉ መንገዲ ይህብ።
`show`	ናይ ሓደ ባእታ ፖፖቨር ይገልጽ። ቅድሚ እቲ ፖፖቨር ብጭቡጥ ምርኣይ (ማለት ቅድሚ እቲ `shown.bs.popover`ፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። እዚ ድማ ከም “ብኢድ” ምብጋስ ናይቲ ፖፖቨር ይቑጸር። ኣርእስቶምን ትሕዝቶኦምን ክልቲኦም ዜሮ ንውሓት ዘለዎም ፖፖቨርስ ፈጺሞም ኣይርኣዩን እዮም።
`toggle`	ናይ ሓደ ባእታ ፖፖቨር ይቕይሮ። ቅድሚ እቲ ፖፖቨር ብጭቡጥ ምርኣይ ወይ ምሕባኡ (ማለት ቅድሚ እቲ `shown.bs.popover`ወይ `hidden.bs.popover`ፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። እዚ ድማ ከም “ብኢድ” ምብጋስ ናይቲ ፖፖቨር ይቑጸር።
`toggleEnabled`	ናይ ሓደ ባእታ ፖፖቨር ንኽርአ ወይ ንኽሕባእ ዘለዎ ዓቕሚ ይቕይሮ።
`update`	ናይ ሓደ ባእታ ፖፖቨር ኣቀማምጣ የዘምን።

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

እቲ setContentሜላ ንሓደ ሞጎተ ይቕበል object፣ ኣብዚ ነፍሲ ወከፍ ንብረት-መፍትሕ ኣብ ውሽጢ እቲ ፖፖቨር ቅጥዒ ቅኑዕ stringመምረጺ እዩ፣ ነፍሲ ወከፍ ተዛማዲ ንብረት-ዋጋ ድማ string| element| function| null

ፍጻሜታት

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

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

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

ሓፈሻዊ ትሕዝቶ

ኣብነታት

ፖፖቨርስ ኣንቅሕ

ቀጥታዊ ዲሞ

ኣርባዕተ ኣንፈታት

ቅቡል ልምዲcontainer

ብሕታዊ ፖፖቨርስ

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

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

ስንኩላን ባእታታት

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

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

ኣጠቓቕማ

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

ኣማራጺታት

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

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

ኣገባባት

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

ፍጻሜታት

ቅቡል ልምዲ`container`

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