Source

ޕޮޕޯވަރސް އެވެ

އައިއޯއެސް އިން ފެންނަ ފަދަ ބޫޓްސްޓްރެޕް ޕޮޕޯވަރސް ސައިޓްގައި ހުންނަ ކޮންމެ އެލިމެންޓަކަށް އިތުރުކުރުމަށް ލިޔެކިޔުންތަކާއި މިސާލުތައް.

އޯވަރވިއު

ޕޮޕޯވަރ ޕްލަގިން ބޭނުންކުރާއިރު އެނގެން ޖެހޭ ކަންތައްތައް:

  • ޕޮޕޯވަރސް ޕޮޒިޝަން ކުރުމަށް ބަރޯސާވަނީ 3 ވަނަ ފަރާތުގެ ލައިބްރަރީ Popper.js އަށެވެ. ޕޮޕޯވަރސް މަސައްކަތް ކުރުމަށްޓަކައި bootstrap.js ގެ ކުރިން popper.min.js ހިމަނަން ނުވަތަ Popper.js ހިމެނޭ bootstrap.bundle.min.js/ ބޭނުން ކުރަން ޖެހެއެވެ!bootstrap.bundle.js
  • ޕޮޕޯވަރސް އަށް ޑިޕެންޑެންސީއެއްގެ ގޮތުގައި ޓޫލްޓިޕް ޕްލަގިން ބޭނުންވެއެވެ.
  • އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ބިލްޑް ކުރައްވަނީ ސޯސް އިން ނަމަ، އެކަމަށް ބޭނުންވަނީutil.js .
  • ޕޮޕޯވަރސް އަކީ ޕާފޯމަންސް ސަބަބުތަކާހުރެ އޮޕްޓް-އިން ކުރާ އެއްޗެހި ކަމުން އަމިއްލައަށް އިނިޝިއަލައިޒް ކުރަން ޖެހެއެވެ .
  • ޒީރޯ ލެންގްސް titleއާއި contentވެލިއުސް އިން ދުވަހަކުވެސް ޕޮޕޯވަރ އެއް ނުފެންނާނެއެވެ.
  • container: 'body'މިއަށްވުރެ ކޮމްޕްލެކްސް ކޮމްޕޯނެންޓްތަކުގައި (އަޅުގަނޑުމެންގެ އިންޕުޓް ގްރޫޕްތަކާއި، ބަޓަން ގްރޫޕްތައް ފަދަ) ރެންޑަރިންގ މައްސަލަތަކުން ސަލާމަތްވުމަށް ކަނޑައަޅާށެވެ .
  • ފޮރުވިފައިވާ އުފެއްދުންތަކުގެ މައްޗަށް ޕޮޕޯވަރސް ޓްރިގަރ ކުރުމުން ފައިދާއެއް ނުވާނެއެވެ.
  • ޕޮޕޯވަރސް ފޯރ .disabledނުވަތަ disabledއެލިމެންޓްސް ޓްރިގަރ ކުރަން ޖެހެނީ ރެޕަރ އެލިމެންޓެއްގެ މައްޗަށެވެ.
  • އެތައް ރޮނގެއް ހުރަސްކޮށް އޮޅާލާފައިވާ އެންކަރުތަކުން ޓްރިގަރ ކުރާއިރު، ޕޮޕޯވަރސް ހުންނާނީ އެންކަރުތަކުގެ ޖުމްލަ ފުޅާމިނުގެ މެދުގައި މެދުވެރިކޮށެވެ. މި ސުލޫކުން ސަލާމަތްވުމަށްޓަކައި .text-nowrapއޮން ޔޫއާރ ސް ބޭނުން ކުރާށެވެ .<a>
  • ޕޮޕޯވަރސް ފޮރުވަން ޖެހެނީ އެތަކެތީގެ އެލިމެންޓްތައް ޑީއޯއެމް އިން ނައްތާލުމުގެ ކުރިންނެވެ.
  • ޕޮޕޯވަރސް ޓްރިގަރ ކުރެވޭނީ ޝެޑޯ ޑޮމް އެއްގެ ތެރޭގައި ހުންނަ އެލިމެންޓެއްގެ ސަބަބުންނެވެ.

މި ކޮމްޕޮނެންޓްގެ އެނިމޭޝަން އިފެކްޓް ބިނާވެފައިވަނީ prefers-reduced-motionމީޑިއާ ކިއުއަރީގެ މައްޗަށެވެ. އަޅުގަނޑުމެންގެ އެކްސެސިބިލިޓީ ޑޮކިއުމަންޓޭޝަންގެ ރިޑޫސްޑް މޮޝަން ބައި ބައްލަވާށެވެ .

ބައެއް މިސާލުތަކާއެކު ޕޮޕޯވަރސް މަސައްކަތްކުރާ ގޮތް ބަލާލުމަށް ކިޔަމުން ގެންދާށެވެ.

މިސާލު: ހުރިހާ ތަނެއްގައި ޕޮޕޯވަރސް އެނެބަލް ކުރުން

ޕޭޖެއްގައި ހުންނަ ހުރިހާ ޕޮޕޯވަރސް އެއް އިނިޝިއަލައިޒް ކުރެވޭނެ އެއް ގޮތަކީ އެ ޕޮޕޯވަރސް 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ޓޮގްލް އެލިމެންޓަށްވުރެ ތަފާތު އެލިމެންޓެއް ޔޫޒަރ ދެން ކްލިކް ކުރުމުން ޕޮޕޯވަރސް ޑިސްމިސް ކުރުމަށް ޓްރިގަރ ބޭނުން ކުރާށެވެ.

ޑިސްމިސް-އޮން-ނެކްސްޓް-ކްލިކް އަށް ވަކި މާކަޕް އެއް ބޭނުންވެއެވެ

ރަނގަޅަށް ކްރޮސް ބްރައުޒާ އަދި ކްރޮސް ޕްލެޓްފޯމް ސުލޫކަށްޓަކައި ޓެގް ބޭނުން <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އިންޓަރެކްޓިވް އެއްޗެހި ނޫން، މާނައަކީ ޕޮޕޯވަރ (ނުވަތަ ޓޫލްޓިޕް) އެއް ޓްރިގަރ ކުރުމަށް ޔޫޒަރުންނަށް ހޯވަރ ނުވަތަ ކްލިކް ނުކުރެވޭނެއެވެ. ވޯކްއަރައުންޑެއްގެ ގޮތުގައި، ރެޕަރަކުން ޕޮޕޯވަރ ޓްރިގަރ ކުރަން <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)

ޕޮޕޯވަރސް ކީބޯޑާއި އެސިސްޓިވް ޓެކްނޮލޮޖީ ބޭނުންކުރާ ފަރާތްތަކަށް ފައިދާހުރި ގޮތަކަށް ހެދުން

ކީބޯޑް ބޭނުންކުރާ ފަރާތްތަކަށް ތިބާގެ ޕޮޕޯވަރސް އެކްޓިވޭޓް ކުރުމުގެ ހުއްދަ ދިނުމަށްޓަކައި، ހަމައެކަނި ސަގާފީ ގޮތުން ކީބޯޑަށް ފޯކަސް ކުރެވޭ އަދި އިންޓަރެކްޓިވް (ލިންކް ނުވަތަ ފޯމް ކޮންޓްރޯލް ފަދަ) އެޗްޓީއެމްއެލް އެލިމެންޓްތަކަށް އެޑް ކުރަންވާނެއެވެ. އެޓްރިބިއުޓް އިތުރުކޮށްގެން އަމިއްލައަށް އެޗްޓީއެމްއެލް އެލިމެންޓްތައް ( <span>s ފަދަ) ފޯކަސް ކުރެވޭ ގޮތަށް ހެދިދާނެ ނަމަވެސް tabindex="0"، މިއީ ކީބޯޑް ބޭނުންކުރާ ފަރާތްތަކަށް ނޮން އިންޓަރެކްޓިވް އެލިމެންޓްތަކުގައި އުނދަގޫ އަދި އޮޅުން ބޮޅުން ބޮޑު ޓެބް ސްޓޮޕްތައް އިތުރުވާނެ ކަމެކެވެ . މީގެ އިތުރުން، ތިބާގެ ޕޮޕޯވަރސް އަށް ޓްރިގަރ އެއްގެ ގޮތުގައި ހަމައެކަނި ބަރޯސާ ނުވާށެވެ hover، މިއީ ކީބޯޑް ބޭނުންކުރާ ފަރާތްތަކަށް އެ ޓްރިގަރ ކުރުމަކީ ކުރެވޭނެ ކަމެއް ނޫން ކަމުގައި ވެގެންދާނެއެވެ.

މި އިޚްތިޔާރާއެކު ޕޮޕޯވަރސް އަށް ރިޗް، ސްޓްރަކްޗަރޑް އެޗްޓީއެމްއެލް އިންސަރޓް ކުރެވޭއިރު، htmlމާގިނައިން ކޮންޓެންޓް އިތުރުކުރުމުން ދުރުހެލިވުމަށް އަޅުގަނޑުމެން ވަރަށް ބޮޑަށް ލަފާދެމެވެ. މިހާރު ޕޮޕޯވަރސް މަސައްކަތްކުރާ ގޮތަކީ، އެއްފަހަރު ދައްކާލުމުން، އެތަކެތީގެ ކޮންޓެންޓް aria-describedbyއެޓްރިބިއުޓް އާއި އެކު ޓްރިގަރ އެލިމެންޓާ ގުޅިފައި އޮތުމެވެ. ނަތީޖާއެއްގެ ގޮތުން ޕޮޕޯވަރގެ މުޅި ކޮންޓެންޓް އެސިސްޓިވް ޓެކްނޮލޮޖީ ބޭނުންކުރާ ފަރާތްތަކަށް އިއުލާން ކުރެވޭނީ އެއް ދިގު، މެދުކެނޑުމެއްނެތި ސްޓްރީމްއެއްގެ ގޮތުގަ އެވެ.

މީގެ އިތުރުން، ތިބާގެ ޕޮޕޯވަރގައި އިންޓަރެކްޓިވް ކޮންޓްރޯލްތައް (ފޯމް އެލިމެންޓްސް ނުވަތަ ލިންކްސް ފަދަ) ވެސް ހިމަނާލެވޭނެ ނަމަވެސް (މި އެލިމެންޓްތައް whiteListނުވަތަ ހުއްދަ ކުރެވިފައިވާ އެޓްރިބިއުޓްތަކާއި ޓެގްތަކަށް އިތުރުކޮށްގެން)، މިވަގުތު ޕޮޕޯވަރ އިން ކީބޯޑް ފޯކަސް އޯޑަރ މެނޭޖް ނުކުރާކަން ސަމާލުކަން ދޭށެވެ. ކީބޯޑް ބޭނުންކުރާ މީހަކު ޕޮޕޯވަރ ހުޅުވާއިރު، ފޯކަސް ޓްރިގަރ ކުރާ އެލިމެންޓަށް ދެމިއޮންނައިރު، އާންމުކޮށް ޕޮޕޯވަރ ޑޮކިއުމަންޓްގެ ސްޓްރަކްޗަރގައި ވަގުތުން ޓްރިގަރ އަށް ތަބާނުވާތީ، ކުރިއަށް/ފިއްތާ ކަމުގެ އެއްވެސް ޔަޤީންކަމެއް ނެތެވެTABކީބޯޑް ބޭނުންކުރާ މީހަކު ޚުދު ޕޮޕޯވަރ އަށް ބަދަލުކުރާނެއެވެ. ކުރުކޮށް ބުނާނަމަ، ހަމައެކަނި ޕޮޕޯވަރަކަށް އިންޓަރެކްޓިވް ކޮންޓްރޯލްތައް އިތުރުކުރުމަކީ، ކީބޯޑް ބޭނުންކުރާ މީހުންނާއި އެސިސްޓިވް ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް މި ކޮންޓްރޯލްތައް ނުފޯރާ/ބޭނުން ނުކުރެވޭނެ ގޮތް ހެދުމާއި، ނުވަތަ އެންމެ ކުޑަމިނުން ލޮޖިކަލް ނޫން ޖުމްލަ ފޯކަސް އޯޑަރަކަށް ހެދުމުގެ ފުރުސަތު ބޮޑެވެ. މި ހާލަތްތަކުގައި އޭގެ ބަދަލުގައި މޮޑަލް ޑައިލޮގެއް ބޭނުން ކުރުމަށް ވިސްނާށެވެ.

އިޚްތިޔާރުތައް

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-animation="".

ސެކިއުރިޓީ ސަބަބުތަކާހުރެ ޑޭޓާ އެޓްރިބިއުޓްތައް ބޭނުންކޮށްގެން sanitize, sanitizeFnއަދި whiteListއޮޕްޝަންތައް ސަޕްލައި ނުކުރެވޭނެކަން ފާހަގަކޮށްލެވެއެވެ.

ނަން ވައްތަރު ޑީފޯލްޓް ތަފްޞީލު
އެނިމޭޝަން އެވެ ބޫލިއަން އެވެ ރަނގަޅު ޕޮޕޯވަރ އަށް ސީއެސްއެސް ފޭޑް ޓްރާންސިޝަން އެއް އެޕްލައި ކުރާށެވެ
ކޮންޓެއިނަރެވެ ސްޓްރިންގް | އެލިމެންޓް | ރަނގަޅުނޫން ރަނގަޅުނޫން

ވަކި އުނިއިތުރަކަށް ޕޮޕޯވަރ އިތުރުކުރެއެވެ. މިސާލު: container: 'body'. މި އިޚްތިޔާރަކީ ޚާއްޞަކޮށް ބޭނުންތެރި އިޚްތިޔާރަކީ ޓްރިގަރިންގ އެލިމެންޓް ކައިރީގައި ޑޮކިއުމަންޓްގެ ފްލޯގައި ޕޮޕޯވަރ ޕޮޒިޝަން ކުރެވޭނެ ގޮތް ހެދުމެވެ - މިއީ ވިންޑޯ ރީސައިޒް ކުރާއިރު ޕޮޕޯވަރ ޓްރިގަރިންގ އެލިމެންޓާ ދުރަށް ފްލޯޓް ނުކުރެވޭނެ ގޮތެކެވެ.
ކޮންޓެންޓް ސްޓްރިންގް | އެލިމެންޓް | ފަންކްޝަން '' އެވެ.

data-contentއެޓްރިބިއުޓް ނެތްނަމަ ޑިފޯލްޓް ކޮންޓެންޓް ވެލިއު .

ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ thisރެފަރެންސް ސެޓްކޮށްގެން ޕޮޕޯވަރ އެޓޭޗްކޮށްފައިވާ އެލިމެންޓަށް ސެޓްކޮށްގެންނެވެ.
ލަސްވުން ނަންބަރު | އެއްޗެއް 0

ޕޮޕޯވަރ ދައްކާ ފޮރުވުން ލަސްކުރުން (ms) - މެނުއަލް ޓްރިގަރ ޓައިޕް އަށް ނުހިނގާނެއެވެ

ނަންބަރެއް ފޯރުކޮށްދީފިނަމަ، ފޮރުވާ/ދައްކާ ދެ ގޮތަށް ވެސް ޑިލޭ ޖަހައެވެ

އެއްޗެއްގެ އޮނިގަނޑަކީ:delay: { "show": 500, "hide": 100 }
html އެވެ ބޫލިއަން އެވެ ރަނގަޅުނޫން ޕޮޕޯވަރ އަށް އެޗްޓީއެމްއެލް ޖައްސާށެވެ. ދޮގުނަމަ ޖީކުއަރީގެ textމެތޯޑް ބޭނުންކޮށްގެން ޑީއޯއެމް އަށް ކޮންޓެންޓް ވައްދާނެއެވެ. އެކްސްއެސްއެސް ހަމަލާތަކާ މެދު ކަންބޮޑުވާނަމަ ޓެކްސްޓް ބޭނުން ކުރާށެވެ.
ޕްލޭސްމަންޓް ސްޓްރިންގް | ފަންކްޝަން 'ކަނާތް'

ޕޮޕޯވަރ ޕޮޒިޝަން ކުރާނެ ގޮތް - އޮޓޯ | މަތީގައި | ތިރީގައި | ކަނާތްފަރާތުން | ކަނާތް. ކަނޑައެޅިއްޖެނަމަ، އެއީ ޑައިނަމިކް ގޮތެއްގައި ޕޮޕޯވަރ ރީއޮރިއެންޓް ކުރާނެ އެއްޗެކެވެ
.auto

ޕްލޭސްމަންޓް ކަނޑައެޅުމަށް ފަންކްޝަނެއް ބޭނުންކުރާއިރު، އޭގެ ފުރަތަމަ އަރގިއުމެންޓްގެ ގޮތުގައި ޕޮޕޯވަރ ޑީއޯއެމް ނޯޑް އަދި ދެވަނަ އަރގިއުމެންޓްގެ ގޮތުގައި ޓްރިގަރިންގ އެލިމެންޓް ޑީއޯއެމް ނޯޑް ހިފައިގެން ގޮވާލައެވެ. ކޮންޓެކްސްޓް thisސެޓްކޮށްފައިވަނީ ޕޮޕޯވަރ އިންސްޓޭންސް އަށެވެ.
ސެލެކްޓަރ އެވެ ސްޓްރިންގް | ރަނގަޅުނޫން ރަނގަޅުނޫން ސެލެކްޓަރެއް ފޯރުކޮށްދީފިނަމަ، ޕޮޕޯވަރ އޮބްޖެކްޓްތައް ކަނޑައެޅިފައިވާ ޓާގެޓްތަކަށް ޑެލިގޭޓް ކުރެވޭނެއެވެ. ޢަމަލީގޮތުން މިއީ ޑައިނަމިކް އެޗްޓީއެމްއެލް ކޮންޓެންޓްގައި ޕޮޕޯވަރސް އިތުރުކުރެވޭނެ ގޮތް ހެދުމަށް ބޭނުންކުރާ އެއްޗެކެވެ. މިކަމާއި މަޢުލޫމާތު ގިނަ މިސާލެއް ބައްލަވާށެވެ .
ޓެމްޕްލޭޓް ސްޓްރިންގ '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

ޕޮޕޯވަރ އުފައްދާއިރު ބޭނުންކުރާނެ އެޗްޓީއެމްއެލް ބެސްޓް ކުރާށެވެ.

އެ ޕޮޕޯވަރސް titleއިންޖެކްޓް ކުރާނީ .popover-header.

އެ ޕޮޕޯވަރސް contentއިންޖެކްޓް ކުރާނީ .popover-body.

.arrowވެގެންދާނީ ޕޮޕޯވަރގެ ތިރިއަށް.

އެންމެ ބޭރުގައި ހުންނަ ރެޕަރ އެލިމެންޓްގައި .popoverކްލާސް ހުންނަންވާނެއެވެ.
މަޤާމު ސްޓްރިންގް | އެލިމެންޓް | ފަންކްޝަން '' އެވެ.

titleއެޓްރިބިއުޓް ނެތްނަމަ ޑިފޯލްޓް ޓައިޓަލް ވެލިއު .

ފަންކްޝަނެއް ދީފިނަމަ، އެއަށް ގޮވާނީ އޭގެ thisރެފަރެންސް ސެޓްކޮށްގެން ޕޮޕޯވަރ އެޓޭޗްކޮށްފައިވާ އެލިމެންޓަށް ސެޓްކޮށްގެންނެވެ.
ކަމެއްވުމަށް މެދުވެރިވާ ސަބަބު ސްޓްރިންގ 'ކްލިކް' ކޮށްލާށެވެ. ޕޮޕޯވަރ ޓްރިގަރ ވާނީ ކިހިނެއް - | ހޯވަރ ކުރާށެވެ | ފޯކަސް | މެނުއަލް. އެތައް ޓްރިގަރެއް ފާސްވެދާނެ؛ އެތަކެތި ވަކިކޮށް ޖާގައެއް ދީގެންނެވެ. manualއެހެން އެއްވެސް ޓްރިގަރަކާ ގުޅުވައި ނުލެވޭނެއެވެ.
އޮފްސެޓް ކޮށްލާށެވެ ނަންބަރު | ސްޓްރިންގ 0 އޭގެ އަމާޒަށް ނިސްބަތްކޮށް ޕޮޕޯވަރ އޮފްސެޓް ކުރުން. އިތުރު މަޢުލޫމާތު ހޯދުމަށް Popper.js ގެ އޮފްސެޓް ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ .
fallbackޕްލޭސްމަންޓް ސްޓްރިންގް | އެރޭ އެވެ 'ފުށުންޖެހުން' ފޯލްބެކްގައި ޕޮޕަރ ބޭނުންކުރާނީ ކޮން މަޤާމެއްކަން ކަނޑައެޅުމަށް ހުއްދަ ދޭށެވެ. އިތުރު މަޢުލޫމާތު ހޯދުމަށް Popper.js ގެ ބިހޭވިއަރ ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ
ބައުންޑަރީ އެވެ ސްޓްރިންގް | އެއްޗެއްގެ ބައެއް 'ސްކްރޯލްޕޭރެންޓް' އެވެ. އޯވަރފްލޯ ކޮންސްޓްރެއިންޓް ބައުންޑަރީ އޮފް ދަ ޕޮޕޯވަރ. 'viewport', 'window', 'scrollParent', ނުވަތަ HTMLElement ރެފަރެންސެއް (އެކަނި ޖާވާސްކްރިޕްޓް) ގެ އަގުތައް ބަލައިގަންނައެވެ . އިތުރު މަޢުލޫމާތު ހޯދުމަށް Popper.js ގެ preventOverflow ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ .
ސެނިޓައިޒް ކުރުން ބޫލިއަން އެވެ ރަނގަޅު ސެނިޓައިޒޭޝަން އެނެބަލް ނުވަތަ ޑިސެބަލް ކުރުން. If activated 'template', 'content'އަދި 'title'އޮޕްޝަންތައް ސެނިޓައިޒް ކުރެވޭނެއެވެ.
ވައިޓްލިސްޓް އެއްޗެއް ޑިފޯލްޓް ވެލިއު ހުއްދަ ލިބިފައިވާ އެޓްރިބިއުޓްތަކާއި ޓެގްތައް ހިމެނޭ އެއްޗެއް
ސެނިޓައިޒްކުރުންFn null | ފަންކްޝަން null އެވެ މިތަނުން އަމިއްލައަށް ސެނިޓައިޒް ފަންކްޝަން ސަޕްލައި ކުރެވޭނެއެވެ. މިއީ ސެނިޓައިޒޭޝަން ކުރުމަށް ޚާއްޞަ ލައިބްރަރީއެއް ބޭނުން ކުރަން އިސްކަންދޭނަމަ ބޭނުންތެރި ކަމަކަށް ވެދާނެއެވެ.
ޕޮޕަރކޮންފިގް null | އެއްޗެއް null އެވެ ބޫޓްސްޓްރެޕްގެ ޑިފޯލްޓް Popper.js ކޮންފިގް ބަދަލުކުރުމަށްޓަކައި، Popper.js ގެ ކޮންފިގްރޭޝަން ބައްލަވާށެވެ

ވަކިވަކި ޕޮޕޯވަރތަކަށް ޑޭޓާ އެޓްރިބިއުޓްސް

ވަކިވަކި ޕޮޕޯވަރތަކަށް އޮޕްޝަންތައް ބަދަލު ގޮތަކަށް ކަނޑައެޅިދާނެ ޑޭޓާ އެޓްރިބިއުޓްތައް ބޭނުންކޮށްގެން، މަތީގައި ބަޔާންކޮށްފައިވާ ފަދައިންނެވެ.

ގޮތްތައް

އެސިންކްރޮނަސް މެތޯޑްސް އާއި ޓްރާންސިޝަންސް

ހުރިހާ އެޕީއައި މެތޯޑްތަކަކީ އެސިންކްރޮނަސް މެތޯޑްތަކެއް ކަމުން ޓްރާންސިޝަނެއް ފެށެއެވެ . އެމީހުން އެނބުރި ގުޅާ މީހާއަށް ޓްރާންސިޝަން ފެށުނުހާ އަވަހަކަށް އެކަމަކު ނިމުމުގެ ކުރިން . މީގެ އިތުރުން ޓްރާންސިޝަން ކޮމްޕޮނެންޓެއްގައި މެތޯޑް ކޯލެއް ކުރާއިރު އަޅާނުލެވޭނެއެވެ .

އިތުރު މަޢުލޫމާތު ހޯދުމަށް އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ޑޮކިއުމަންޓޭޝަން ބައްލަވާށެވެ .

$().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 މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޕޮޕޯވަރ ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
ފޮރުވާ.ބީ.އެސް.ޕޮޕޯވަރ މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hideއިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ.
ފޮރުވިފައިވާ.bs.popover މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޕޮޕޯވަރ ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
އިންސަރޓް ކޮށްފައި.bs.popover މި އިވެންޓް ފަޔަރ ކުރެވެނީ show.bs.popoverއިވެންޓަށްފަހު ޕޮޕޯވަރ ޓެމްޕްލޭޓް ޑީއޯއެމްއަށް އިތުރުކޮށްފައި އޮތުމުންނެވެ. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})