މައިގަނޑު ކޮންޓެންޓަށް ސްކިޕް ކުރާށެވެ ޑޮކްސް ނެވިގޭޝަނަށް ސްކިޕް ކުރާށެވެ
in English

ޓޫލްޓިޕްސް

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

އޯވަރވިއު

ޓޫލްޓިޕް ޕްލަގިން ބޭނުންކުރާއިރު އެނގެން ޖެހޭ ކަންތައްތައް:

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

އެ ހުރިހާ ކަމެއް ލިބިއްޖެތަ؟ މޮޅު، ބައެއް މިސާލުތަކާއެކު އެމީހުން މަސައްކަތްކުރާ ގޮތް ބަލާލަމާ ހިނގާށެވެ.

މިސާލު: ހުރިހާ ތަނެއްގައި ޓޫލްޓިޕްސް އެނެބަލް ކުރުން

ޕޭޖެއްގައި ހުރި ހުރިހާ ޓޫލްޓިޕްތަކެއް އިނިޝިއަލައިޒް ކުރެވޭނެ އެއް ގޮތަކީ އެ ޓޫލްޓިޕްތަކުގެ data-bs-toggleއެޓްރިބިއުޓް އަށް ބަލައިގެން އެ ޓޫލްޓިޕްތައް ހޮވުމެވެ:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

މިސާލުތަކެވެ

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

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

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

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

އަދި ކަސްޓަމް އެޗްޓީއެމްއެލް އިތުރުކޮށްގެން:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

އެސްވީޖީއަކާއެކު:

ސާސް އެވެ

ވެރިއޭބަލްސް އެވެ

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

ބޭނުން ކުރުން

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

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޓޫލްޓިޕް ޓްރިގަރ ކުރާށެވެ:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
އޯވަރފްލޯ autoއާއި ...scroll

ޓޫލްޓިޕް ޕޮޒިޝަން އޮޓޮމެޓިކުން ބަދަލުވާން މަސައްކަތް ކުރަނީ ބެލެނިވެރި ކޮންޓެއިނަރެއްގައި އަޅުގަނޑުމެންގެ overflow: auto, އެކަމަކު އަދިވެސް އަސްލު ޕްލޭސްމަންޓްގެ ޕޮޒިޝަން ބެހެއްޓޭ. މިކަން ހައްލުކުރުމަށްޓަކައި، ޑިފޯލްޓް ވެލިއު އޯވަރރައިޑް ކުރުމަށް އޮޕްޝަން (އޮޕްޝަން ބޭނުންކޮށްގެން ފްލިޕް މޮޑިފައިއަރ އަށް ) އެއްވެސް HTMLElement އަށް ސެޓް ކުރާށެވެ، , ފަދައިން :overflow: scroll.table-responsiveboundarypopperConfig'clippingParents'document.body

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

މާކަޕް

ޓޫލްޓިޕަކަށް ބޭނުންވާ މާކަޕަކީ ހަމައެކަނި dataއެޓްރިބިއުޓެއް ކަމަށާއި titleއެޗްޓީއެމްއެލް އެލިމެންޓްގައި ޓޫލްޓިޕް އެއް ހުންނަން ބޭނުންވާ ކަމަށް ވެސް ވިދާޅުވި އެވެ. ޓޫލްޓިޕްގެ ޖެނެރޭޓް ކުރެވޭ މާކަޕް އަކީ ތަންކޮޅެއް ސާދާ އެއްޗެއް ނަމަވެސް، އެއަށް ޕޮޒިޝަނެއް ބޭނުންވާ ނަމަވެސް (ޑިފޯލްޓްކޮށް، topޕްލަގިން އިން ސެޓް ކޮށްފައި ހުންނަނީ) އެވެ.

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

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

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

ނުކުޅެދުންތެރިކަން ހުންނަ އެލިމެންޓްތަކެވެ

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

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

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

ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-bs-ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-bs-animation="". ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް އޮޕްޝަންތައް ފާސްކުރާއިރު އޮޕްޝަން ނަމުގެ ކޭސް ޓައިޕް camelCase އިން kebab-case އަށް ބަދަލުކުރުން ޔަގީންކުރައްވާށެވެ. މިސާލަކަށް ބޭނުން ކުރުމުގެ ބަދަލުގައި ބޭނުން data-bs-customClass="beautifier"ކުރާށެވެ data-bs-custom-class="beautifier".

ސެކިއުރިޓީ ސަބަބުތަކާހުރެ ޑޭޓާ އެޓްރިބިއުޓްތައް ބޭނުންކޮށްގެން sanitize, sanitizeFn, އަދި allowListއޮޕްޝަންތައް ސަޕްލައި ނުކުރެވޭނެކަން ފާހަގަކޮށްލެވެއެވެ.
ނަން ވައްތަރު ޑީފޯލްޓް ތަފްޞީލު
animation ބޫލިއަން އެވެ true ޓޫލްޓިޕް އަށް ސީއެސްއެސް ފޭޑް ޓްރާންސިޝަން އެއް އެޕްލައި ކުރާށެވެ
container ސްޓްރިންގް | އެލިމެންޓް | ރަނގަޅުނޫން false

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

delay ނަންބަރު | އެއްޗެއް 0

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

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

އެއްޗެއްގެ އޮނިގަނޑަކީ:delay: { "show": 500, "hide": 100 }

html ބޫލިއަން އެވެ false

ޓޫލްޓިޕްގައި އެޗްޓީއެމްއެލް އަށް ހުއްދަ ދޭށެވެ.

ތެދެއްނަމަ ޓޫލްޓިޕްގެ އެޗްޓީއެމްއެލް ޓެގްތައް ޓޫލްޓިޕްގައި titleރެންޑަރ ކުރެވޭނެއެވެ. ދޮގުނަމަ، innerTextޕްރޮޕަޓީ ބޭނުންކޮށްގެން ޑީއޯއެމް އަށް ކޮންޓެންޓް ވައްދާނެއެވެ.

އެކްސްއެސްއެސް ހަމަލާތަކާ މެދު ކަންބޮޑުވާނަމަ ޓެކްސްޓް ބޭނުން ކުރާށެވެ.

placement ސްޓްރިންގް | ފަންކްޝަން 'top'

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

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

selector ސްޓްރިންގް | ރަނގަޅުނޫން false ސެލެކްޓަރެއް ފޯރުކޮށްދީފިނަމަ، ޓޫލްޓިޕް އޮބްޖެކްޓްތައް ކަނޑައެޅިފައިވާ ޓާގެޓްތަކަށް ޑެލިގޭޓް ކުރެވޭނެއެވެ. ޢަމަލީގޮތުން ބަލާއިރު، މިއީ ޑައިނަމިކް ގޮތެއްގައި އިތުރުކުރެވޭ ޑީއޯއެމް އެލިމެންޓްތަކަށް ( jQuery.onސަޕޯޓް) ޓޫލްޓިޕްސް ވެސް އަމަލުކުރުމަށް ބޭނުންކުރާ އެއްޗެކެވެ. މިކަމާއި މަޢުލޫމާތު ގިނަ މިސާލެއް ބައްލަވާށެވެ .
template ސްޓްރިންގ '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

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

ޓޫލްޓިޕްގެ titleތެރެއަށް އިންޖެކްޓް ކުރެވޭނެއެވެ .tooltip-inner.

.tooltip-arrowޓޫލްޓިޕްގެ ތިރިއަށް ވެގެންދާނެއެވެ.

އެންމެ ބޭރުގައި ހުންނަ ރެޕަރ އެލިމެންޓްގައި .tooltipކްލާސް އަދި role="tooltip".

title ސްޓްރިންގް | އެލިމެންޓް | ފަންކްޝަން ''

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

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

trigger ސްޓްރިންގ 'hover focus'

ޓޫލްޓިޕް ޓްރިގަރ ކުރާ ގޮތް - | ހޯވަރ ކުރާށެވެ | ފޯކަސް | މެނުއަލް. އެތައް ޓްރިގަރެއް ފާސްވެދާނެ؛ އެތަކެތި ވަކިކޮށް ޖާގައެއް ދީގެންނެވެ.

'manual'ޓޫލްޓިޕް ޕްރޮގްރާމެޓިކަލީ ޓްރިގަރ ވާނީ .show(), .hide()އަދި .toggle()މެތޯޑްސް މެދުވެރިކޮށްކަން އަންގައިދެއެވެ؛ މި އަގު އެހެން އެއްވެސް ޓްރިގަރަކާ ގުޅުވައި ނުލެވޭނެއެވެ.

'hover'އަމިއްލައަށް ކީބޯޑް މެދުވެރިކޮށް ޓްރިގަރ ނުކުރެވޭ ޓޫލްޓިޕްތައް އުފެދިގެންދާނެ ކަމަށާއި، ބޭނުންކުރަންވާނީ ކީބޯޑް ބޭނުންކުރާ ފަރާތްތަކަށް އެއް މައުލޫމާތު ފޯރުކޮށްދިނުމަށް ބަދަލު ގޮތްތަކެއް ހުރިނަމަ އެކަންޏެވެ.

fallbackPlacements އެރޭ އެވެ ['top', 'right', 'bottom', 'left'] އެރޭގައި ޕްލޭސްމަންޓްތަކުގެ ލިސްޓެއް ފޯރުކޮށްދީގެން (އިސްކަންދޭ ތަރުތީބުން) ފޯލްބެކް ޕްލޭސްމަންޓްތައް މާނަކުރުން. އިތުރު މަޢުލޫމާތު ހޯދުމަށް ޕޮޕަރގެ ބިހޭވިއަރ ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ
boundary ސްޓްރިންގް | އެއްޗެއްގެ ބައެއް 'clippingParents' ޓޫލްޓިޕްގެ އޯވަރފްލޯ ކޮންސްޓްރެއިންޓް ބައުންޑަރީ (އެޕްލައި ކުރެވެނީ ހަމައެކަނި ޕޮޕަރގެ preventOverflow މޮޑިފައިޓަރަށް). ބައި ޑިފޯލްޓް އެއީ 'clippingParents'އަދި ގަބޫލުކުރެވޭނީ އެޗްޓީއެމްއެލްއެލިމެންޓް ރެފަރެންސެއް (އެކަނި ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް) އެވެ. އިތުރު މަޢުލޫމާތު ހޯދުމަށް ޕޮޕަރގެ ޑިޓެކްޓްއޮވަރފްލޯ ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ .
customClass ސްޓްރިންގް | ފަންކްޝަން ''

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

އަދި އިތުރު ކްލާސް ނަންތައް ހިމެނޭ އެއް ސްޓްރިންގް ރިޓަރން ކުރަންޖެހޭ ފަންކްޝަނެއް ވެސް ޕާސް ކުރެވިދާނެއެވެ.

sanitize ބޫލިއަން އެވެ true ސެނިޓައިޒޭޝަން އެނެބަލް ނުވަތަ ޑިސެބަލް ކުރުން. އެކްޓިވޭޓް ވެއްޖެނަމަ 'template'އަދި 'title'އޮޕްޝަންތައް ސެނިޓައިޒް ކުރެވޭނެއެވެ. އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ޑޮކިއުމަންޓޭޝަންގައިވާ ސެނިޓައިޒާ ބައި ބައްލަވާށެވެ .
allowList އެއްޗެއް ޑިފޯލްޓް ވެލިއު ހުއްދަ ލިބިފައިވާ އެޓްރިބިއުޓްތަކާއި ޓެގްތައް ހިމެނޭ އެއްޗެއް
sanitizeFn null | ފަންކްޝަން null މިތަނުން އަމިއްލައަށް ސެނިޓައިޒް ފަންކްޝަން ސަޕްލައި ކުރެވޭނެއެވެ. މިއީ ސެނިޓައިޒޭޝަން ކުރުމަށް ޚާއްޞަ ލައިބްރަރީއެއް ބޭނުން ކުރަން އިސްކަންދޭނަމަ ބޭނުންތެރި ކަމަކަށް ވެދާނެއެވެ.
offset އެރޭ | ސްޓްރިންގް | ފަންކްޝަން [0, 0]

ޓޫލްޓިޕް އޭގެ ޓާގެޓަށް ނިސްބަތްކޮށް އޮފްސެޓް ކުރުން. ކޮމާ ވަކިކޮށްފައިވާ އަގުތަކާއެކު ޑޭޓާ އެޓްރިބިއުޓްތަކުގައި ސްޓްރިންގއެއް ޕާސް ކުރެވިދާނެ ފަދައިން:data-bs-offset="10,20"

އޮފްސެޓް ކަނޑައެޅުމަށް ފަންކްޝަނެއް ބޭނުންކުރާއިރު، އެއަށް ގޮވަނީ އޭގެ ފުރަތަމަ އަރގިއުމެންޓްގެ ގޮތުގައި ޕޮޕަރ ޕްލޭސްމަންޓާއި، ރެފަރެންސް، އަދި ޕޮޕަރ ރެކްޓްސް ހިމެނޭ އޮބްޖެކްޓަކުންނެވެ. ދެވަނަ އަރގިއުމެންޓްގެ ގޮތުގައި ޓްރިގަރިންގ އެލިމެންޓް ޑީއޯއެމް ނޯޑް ފާސްކުރެއެވެ. ފަންކްޝަނުން ދެ ނަންބަރެއް ހިމެނޭ އެރޭއެއް ރިޓަރން ކުރަން ޖެހެއެވެ: .[skidding, distance]

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

popperConfig null | އެއްޗެއް | ފަންކްޝަން null

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

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

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

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

ފަންކްޝަން ބޭނުންކޮށްގެން ބޭނުންކޮށްގެންpopperConfig

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

ގޮތްތައް

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

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

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

ދެއްކުން

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ހާމަކުރެއެވެ. ޓޫލްޓިޕް ހަގީގަތުގައި ދައްކާލުމުގެ ކުރިން (އެބަހީ shown.bs.tooltipއިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރި ދެއެވެ. މިއީ ޓޫލްޓިޕްގެ “މެނުއަލް” ޓްރިގަރިންގ އެއް ކަމުގައި ބެލެވެއެވެ. ޒީރޯ ދިގުމިނުގެ ސުރުޚީތައް ހުންނަ ޓޫލްޓިޕްތައް ދުވަހަކުވެސް ނުފެނެއެވެ.

tooltip.show()

ފޮރުވުން

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ފޮރުވައެވެ. ޓޫލްޓިޕް ހަގީގަތުގައި ފޮރުވުމުގެ ކުރިން (އެބަހީ hidden.bs.tooltipއިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރި ދެއެވެ. މިއީ ޓޫލްޓިޕްގެ “މެނުއަލް” ޓްރިގަރިންގ އެއް ކަމުގައި ބެލެވެއެވެ.

tooltip.hide()

ޓޮގްލް ކޮށްލާށެވެ

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ޓޮގްލް ކުރެއެވެ. ޓޫލްޓިޕް ހަގީގަތުގައި ދައްކާ ނުވަތަ ފޮރުވުމުގެ ކުރިން (އެބަހީ shown.bs.tooltipނުވަތަ hidden.bs.tooltipއިވެންޓް ހިނގުމުގެ ކުރިން) ކޯލަރަށް އެނބުރިދެއެވެ. މިއީ ޓޫލްޓިޕްގެ “މެނުއަލް” ޓްރިގަރިންގ އެއް ކަމުގައި ބެލެވެއެވެ.

tooltip.toggle()

ނައްތާލުން

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ފޮރުވައި ނައްތާލައެވެ (ޑޮމް އެލިމެންޓުގައި ރައްކާކޮށްފައިވާ ޑޭޓާ ނައްތާލައެވެ). ޑެލިގޭޝަން ބޭނުންކުރާ ޓޫލްޓިޕްތައް (އެއީ އޮޕްޝަން ބޭނުންކޮށްގެން އުފައްދާފައިވާ ތަކެތިselector ) ޑެސެންޑެންޓް ޓްރިގަރ އެލިމެންޓްތަކުގައި ވަކިވަކިން ނައްތާލެވޭކަށް ނެތެވެ.

tooltip.dispose()

މަގުފަހި

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

tooltip.enable()

ޑިޒޭބަލް

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ދައްކާނެ ޤާބިލުކަން ނައްތާލައެވެ. ޓޫލްޓިޕް ދައްކާލެވޭނީ އަލުން އެނެބަލް ކޮށްފިނަމައެވެ.

tooltip.disable()

ޓޮގްލްއެނެބަލްޑް

އެލިމެންޓެއްގެ ޓޫލްޓިޕް ދައްކާ ނުވަތަ ފޮރުވުމުގެ ޤާބިލުކަން ޓޮގްލް ކުރެއެވެ.

tooltip.toggleEnabled()

އަޕްޑޭޓް

އެލިމެންޓެއްގެ ޓޫލްޓިޕްގެ މަޤާމު އަޕްޑޭޓް ކުރެއެވެ.

tooltip.update()

ގެޓްއިންސްޓޭންސް

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

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

ގެޓްއޯރކްރިއޭޓްއިންސްޓޭންސް

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

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

އިވެންޓްސް

އިވެންޓް ޓައިޕް ތަފްޞީލު
show.bs.tooltip މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ showއިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ.
shown.bs.tooltip މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޓޫލްޓިޕް ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
hide.bs.tooltip މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hideއިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ.
hidden.bs.tooltip މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޓޫލްޓިޕް ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
inserted.bs.tooltip މި އިވެންޓް ފަޔަރ ކުރެވެނީ show.bs.tooltipއިވެންޓަށްފަހު ޓޫލްޓިޕް ޓެމްޕްލޭޓް ޑީއޯއެމްއަށް އިތުރުކޮށްފައިވުމުންނެވެ.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()