in English

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

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

އޯވަރވިއު

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

  • ޕޮޕޯވަރސް ޕޮޒިޝަން ކުރުމަށް ބަރޯސާވަނީ 3 ވަނަ ފަރާތުގެ ލައިބްރަރީ ޕޮޕަރ އަށެވެ. ޕޮޕޯވަރސް މަސައްކަތް ކުރުމަށްޓަކައި bootstrap.js ގެ ކުރިން popper.min.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="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  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)
ޖީޕީޔޫ އެކްސެލެރޭޝަން

ޖީޕީޔޫ އެކްސެލެރޭޝަން އާއި ބަދަލުކޮށްފައިވާ ސިސްޓަމް ޑީޕީއައި ގެ ސަބަބުން ވިންޑޯޒް 10 ޑިވައިސްތަކުގައި ބައެއް ފަހަރު ޕޮޕޯވަރސް ބްލަރީ ކޮށް ފެނެއެވެ. v4 ގައި މިކަމަށް އޮތް ވޯކްއަރައުންޑަކީ ތިމާގެ ޕޮޕޯވަރސް ތަކުގައި ބޭނުންވާ ގޮތަށް ޖީޕީޔޫ އެކްސެލެރޭޝަން ޑިސެބިލް ކުރުމެވެ.

ލަފާދީފައިވާ ރަނގަޅުކުރުން:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

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

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

ޕޮޕޯވަރ ދައްކާއިރު ކްލާސްތައް އިތުރުކޮށްލާށެވެ. މި ކްލާސްތައް ޓެމްޕްލޭޓްގައި ކަނޑައެޅިފައިވާ އެއްވެސް ކްލާހެއްގެ އިތުރުން އިތުރުކުރެވޭނެކަން ފާހަގަކޮށްލެވެއެވެ. އެތައް ކްލާހެއް އިތުރުކުރުމަށްޓަކައި، އެ ކްލާސްތައް ވަކިކޮށް ޖާގަ ދީގެން: 'a b'.

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

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

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

ގޮތްތައް

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

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

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

$().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...
})