Source

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

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

ሓፈሻዊ ትሕዝቶ

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

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

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

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

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

$(function () {
  $('[data-toggle="popover"]').popover()
})

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

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

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

ኣብነት

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

ኣርባዕተ ኣንፈታት

ኣርባዕተ ኣማራጺታት ኣለዉ፡ ላዕለዋይ፡ የማን፡ ታሕተዋይን ጸጋምን ተሰሪዖም።

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

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

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

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

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

ካብ ስራሕ ዝእለ ፖፖቨር 
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

ስንኩላን ባእታታት

እቲ ባህሪ ዘለዎም ባእታታት disabledመስተጋብራዊ ኣይኮኑን፣ ማለት ተጠቀምቲ ንፖፖቨር (ወይ tooltip) ንምብጋስ ክሕንብሱ ወይ ጠዊቖም ክገብሩ ኣይክእሉን እዮም። <div>ከም መፍትሒ፡ ነቲ ፖፖቨር ካብ ሓደ መጠቕለሊ ክትጅምሮ ወይ ድማ ነቲ ኣብ ልዕሊ እቲ ዝተሰናኸለ ባእታ <span>ክትሽፍኖ ክትደሊ ኢኻ ።pointer-events

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

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

ኣጠቓቕማ

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

$('#example').popover(options)

ኣማራጺታት

ኣማራጺታት ብመንገዲ ዳታ ​​ባህርያት ወይ ጃቫስክሪፕት ክሓልፉ ይኽእሉ። ንባህርያት ዳታ፡ ስም ኣማራጺ ናብ ምውሳኽ data-፡ ከምቲ ኣብ data-animation="".

ሽም ዓይነት ትሑዝ መግለፂ
ኣኒሜሽን ምግባር ቡልያን ዝብል እዩ። ሓቂ ኣብቲ ፖፖቨር ናይ CSS ምድምሳስ ምስግጋር ተግባራዊ ግበር
መትሓዚ ሕብረ ቃላት | ባእታ | ሓሶት ሓሶት

ነቲ ፖፖቨር ምስ ሓደ ፍሉይ ባእታ ይውስኾ። ኣብነት container: 'body'፡ . እዚ ኣማራጺ ብፍላይ ጠቓሚ እዩ ምኽንያቱ ነቲ ፖፖቨር ኣብ ዋሕዚ ናይቲ ሰነድ ኣብ ጥቓ እቲ መበገሲ ባእታ ከተቐምጦ ስለዘኽእለካ - እዚ ድማ ኣብ እዋን ምቕያር ዓቐን መስኮት እቲ ፖፖቨር ካብቲ መበገሲ ባእታ ከይንሳፈፍ ይከላኸል።
ትሕዝቶ ሕብረ ቃላት | ባእታ | ተግባር '' ።

data-contentባህሪ እንተዘይሃልዩ ነባሪ ትሕዝቶ ዋጋ ።

ሓደ ፋንክሽን እንተተዋሂቡ this፡ መወከሲኡ ምስቲ ፖፖቨር ዝተተሓሓዘሉ ባእታ ተሰሪዑ ክጽዋዕ እዩ።
ምዝንጋዕ ቁጽሪ | ግኡዝ ነገር 0.

ምድንጓይ ምርኣይን ምሕባእን ፖፖቨር (ms) - ንዓይነት ማንዋል ትሪግር ኣይምልከትን እዩ።

ቁጽሪ እንተተቐሪቡ፡ ምድንጓይ ኣብ ክልቲኡ ምሕባእ/ምርኣይ ይትግበር

ኣቃውማ ኣቕሓ፤delay: { "show": 500, "hide": 100 }
html ዝብል ጽሑፍ ኣሎ። ቡልያን ዝብል እዩ። ሓሶት ኣብቲ ፖፖቨር ኤችቲኤምኤል ኣእትዉ። ሓሶት እንተኾይኑ፡ ናይ jQuery textሜላ ትሕዝቶ ናብ DOM ንምእታው ክጥቀም እዩ። ብዛዕባ መጥቃዕቲ XSS እንተተጨኒቕካ ጽሑፍ ተጠቐም።
ምምዳብ ሕብረ ቃላት | ተግባር 'ትኽክል'

ከመይ ጌርና ፖፖቨር ንቕመጦ - auto | ላዕለዋይ ክፋል | ታሕተዋይ ክፋል | ጸጋም | ትኽክል.
መዓስ autoይግለጽ፡ ነቲ ፖፖቨር ብዳይናሚክ ዳግማይ ኣንፈት ክህቦ እዩ።

ሓደ ፋንክሽን ነቲ ኣቀማምጣ ንምውሳን ክጥቀመሉ ከሎ፡ እቲ ፖፖቨር DOM ኖድ ከም ቀዳማይ ሞጎተኡ፡ እቲ ትሪግሪንግ ኤለመንት DOM ኖድ ድማ ከም ካልኣይ ኰይኑ ይጽዋዕ። እቲ thisዓውዲ ናብቲ popover instance ይቕመጥ።
መምረጺ ሕብረ ቃላት | ሓሶት ሓሶት ሓደ መምረጺ እንተተዋሂቡ፡ ፖፖቨር ነገራት ናብቶም ዝተገልጹ ዕላማታት ክውከሉ እዮም። ብተግባር እዚ ዳይናሚክ ኤችቲኤምኤል ትሕዝቶ ፖፖቨርስ ክውሰኽ ንምኽኣል ይጥቀመሉ። ነዚን መሃሪ ኣብነትን ርአ ።
ቅጥዒ ገመድ '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

ነቲ ፖፖቨር ክትፈጥር ከለኻ ክትጥቀመሉ እትደሊ HTML መሰረት ግበር።

እቲ ፖፖቨርስ titleኣብቲ .popover-header.

እቲ ፖፖቨርስ contentኣብቲ .popover-body.

.arrowፍላጻ ናይቲ ፖፖቨር ክኸውን እዩ።

እቲ ደጋዊ ዝኾነ መጠቕለሊ ባእታ .popoverክፍሊ ክህልዎ ይግባእ።
ርእሲ ሕብረ ቃላት | ባእታ | ተግባር '' ።

titleባህሪ እንተዘይሃልዩ ነባሪ ዋጋ ኣርእስቲ ።

ሓደ ፋንክሽን እንተተዋሂቡ this፡ መወከሲኡ ምስቲ ፖፖቨር ዝተተሓሓዘሉ ባእታ ተሰሪዑ ክጽዋዕ እዩ።
ምልዕዓል ገመድ 'ጠውቕ'። ፖፖቨር ብኸመይ ይጅምር - | ጠውቕ hover | ትኹረት | ናይ ኢድ. ብዙሓት መበገሲታት ክትሓልፍ ትኽእል ኢኻ፤ ብነጥቢ ፍለዮም። manualምስ ዝኾነ ካልእ መበገሲ ክውሃሃድ ኣይክእልን።
ኦፍሴት ዝበሃል ምዃኑ’ዩ። ቁጽሪ | ገመድ 0. ምትዕርራይ ናይቲ ፖፖቨር ብተዛማዲ ምስቲ ዕላማኡ። ንዝያዳ ሓበሬታ ኣብ Popper.js's offset docs ተወከሱ ።
fallbackምቕማጥ ሕብረ ቃላት | ስርርዕ 'መንገብገብ' ፖፐር ኣብ ፎልባክ ኣየናይ ቦታ ከም ዝጥቀም ንምግላጽ ፍቐደሉ። ንዝያዳ ሓበሬታ ኣብ Popper.js ናይ ባህሪ ሰነዳት ተወከሱ
ዶብ ምዃኑ’ዩ። ሕብረ ቃላት | ባእታ 'ስክሮልወላዲ'። ምፍሳስ ደረት ዶብ ናይቲ ፖፖቨር። 'viewport'ናይ , 'window', 'scrollParent', ወይ ናይ HTMLElement መወከሲ ክብርታት ይቕበል (ጃቫስክሪፕት ጥራይ)። ንዝያዳ ሓበሬታ ኣብ Popper.js's preventOverflow docs ተወከሱ ።

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

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

ኣገባባት

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

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

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

$().popover(options)

ንሓደ ባእታ ምትእኽኻብ ፖፖቨርስ የበግስ።

.popover('show')

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

$('#element').popover('show')

.popover('hide')

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

$('#element').popover('hide')

.popover('toggle')

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

$('#element').popover('toggle')

.popover('dispose')

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

$('#element').popover('dispose')

.popover('enable')

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

$('#element').popover('enable')

.popover('disable')

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

$('#element').popover('disable')

.popover('toggleEnabled')

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

$('#element').popover('toggleEnabled')

.popover('update')

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

$('#element').popover('update')

ፍጻሜታት

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