Source

ޓޫލްޓިޕްސް

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

އޯވަރވިއު

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

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

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

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

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

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

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

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

ޓައިޓް ޕެންޓްސް ނެކްސްޓް ލެވެލް ކެފިޔޭ ތިޔަބޭފުޅުންނަށް ފަހަރެއްގައި އެތަކެތީގެ ވާހަކައެއް އަޑުއިވިފައެއް ނެތް. ފޮޓޯ ޖަގަހަ ތުނބުޅި ރޯ ޑެނިމް ލެޓަރޕްރެސް ވީގަން މެސެންޖަރ ބެގް ސްޓަމްޕްޓައުން. ފާމް ޓު ޓޭބަލް ސެއިޓަން، އެމްސީއެސްވީނީގެ ފިކްސީ ސަސްޓެއިނަބަލް ކިނޯއާ 8 ބިޓް އެމެރިކަން އެޕަރަލްގައި ޓެރީ ރިޗާޑްސަން ވައިނައިލް ޗެމްބްރޭ އެއް ހުންނާނެ އެވެ. ތުނބުޅި ސްޓަމްޕްޓައުން، ކާޑިގަންސް ބަންހް މި ލޯމޯ ތަންޑަރކެޓްސް. ޓޯފޫ ބަޔޯޑީސަލް ވިލިއަމްސްބަރގް މާރފާ، ހަތަރު ލޮކޯ މެކްސްވީނީގެ ކްލީންސް ވީގަން ޗެމްބްރޭ. A really ironic artisan whatever keytar , ސީންސްޓަރ ފާމް-ޓު-ޓޭބަލް ބޭންކްސީ އޮސްޓިން ޓްވިޓަރ ހެންޑްލް ފްރީގަން ކްރެޑް ރޯ ޑެނިމް ސިންގަލް-އޮރިޖިން ކޮފީ ވައިރަލް.

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

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

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

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

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

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

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

$('#example').tooltip(options)
އޯވަރފްލޯ autoއާއި ...scroll

ޓޫލްޓިޕް ޕޮޒިޝަން އޮޓޮމެޓިކުން ބަދަލުވާން މަސައްކަތް ކުރަނީ ބެލެނިވެރި ކޮންޓެއިނަރެއްގައި އަޅުގަނޑުމެންގެ overflow: auto, އެކަމަކު އަދިވެސް އަސްލު ޕްލޭސްމަންޓްގެ ޕޮޒިޝަން ބެހެއްޓޭ. ހައްލުކުރުމަށްޓަކައި، ޑިފޯލްޓް ވެލިއު ނޫން އެހެން އެއްޗަކަށް އިޚްތިޔާރު ސެޓްކުރުން، , ފަދައިން :overflow: scroll.table-responsiveboundary'scrollParent''window'

$('#example').tooltip({ boundary: 'window' })

މާކަޕް

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

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

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

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

<!-- HTML to write -->
<a href="#" data-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="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

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

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

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

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

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

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

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

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

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

އެއްޗެއްގެ އޮނިގަނޑަކީ:delay: { "show": 500, "hide": 100 }
html އެވެ ބޫލިއަން އެވެ ރަނގަޅުނޫން

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

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

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

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

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

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

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

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

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

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

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

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

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

'hover'އަމިއްލައަށް ކީބޯޑް މެދުވެރިކޮށް ޓްރިގަރ ނުކުރެވޭ ޓޫލްޓިޕްތައް އުފެދިގެންދާނެ ކަމަށާއި، ބޭނުންކުރަންވާނީ ކީބޯޑް ބޭނުންކުރާ ފަރާތްތަކަށް އެއް މައުލޫމާތު ފޯރުކޮށްދިނުމަށް ބަދަލު ގޮތްތަކެއް ހުރިނަމަ އެކަންޏެވެ.
އޮފްސެޓް ކޮށްލާށެވެ ނަންބަރު | ސްޓްރިންގ 0 ޓޫލްޓިޕް އޭގެ ޓާގެޓަށް ނިސްބަތްކޮށް އޮފްސެޓް ކުރުން. އިތުރު މަޢުލޫމާތު ހޯދުމަށް Popper.js ގެ އޮފްސެޓް ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ .
fallbackޕްލޭސްމަންޓް ސްޓްރިންގް | އެރޭ އެވެ 'ފުށުންޖެހުން' ފޯލްބެކްގައި ޕޮޕަރ ބޭނުންކުރާނީ ކޮން މަޤާމެއްކަން ކަނޑައެޅުމަށް ހުއްދަ ދޭށެވެ. އިތުރު މަޢުލޫމާތު ހޯދުމަށް Popper.js ގެ ބިހޭވިއަރ ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ
ބައުންޑަރީ އެވެ ސްޓްރިންގް | އެއްޗެއްގެ ބައެއް 'ސްކްރޯލްޕޭރެންޓް' އެވެ. ޓޫލްޓިޕްގެ އޯވަރފްލޯ ކޮންސްޓްރެއިންޓް ބައުންޑަރީ. 'viewport', 'window', 'scrollParent', ނުވަތަ HTMLElement ރެފަރެންސެއް (އެކަނި ޖާވާސްކްރިޕްޓް) ގެ އަގުތައް ބަލައިގަންނައެވެ . އިތުރު މަޢުލޫމާތު ހޯދުމަށް Popper.js ގެ preventOverflow ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ .

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

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

ގޮތްތައް

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

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

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

$().tooltip(options)

އެލިމެންޓް ކަލެކްޝަނަކަށް ޓޫލްޓިޕް ހެންޑްލަރ އެއް އެޓޭޗް ކުރެއެވެ.

.tooltip('show')

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

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

.tooltip('hide')

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

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

.tooltip('toggle')

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

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

.tooltip('dispose')

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

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

.tooltip('enable')

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

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

.tooltip('disable')

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

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

.tooltip('toggleEnabled')

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

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

.tooltip('update')

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

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

އިވެންޓްސް

އިވެންޓް ޓައިޕް ތަފްޞީލު
ޝޯ.ބީއެސް.ޓޫލްޓިޕް މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ showއިންސްޓޭންސް މެތޯޑް ގޮވާލުމުންނެވެ.
ދައްކާފައިވާ.bs.tooltip މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޓޫލްޓިޕް ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
hide.bs.ޓޫލްޓިޕް މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ hideއިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ.
ފޮރުވިފައިވާ.ބީއެސް.ޓޫލްޓިޕް މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޓޫލްޓިޕް ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތައް ފުރިހަމަވާންދެން މަޑުކުރާނެ) އެވެ.
އިންސަރޓެޑް.ބީއެސް.ޓޫލްޓިޕް މި އިވެންޓް ފަޔަރ ކުރެވެނީ show.bs.tooltipއިވެންޓަށްފަހު ޓޫލްޓިޕް ޓެމްޕްލޭޓް ޑީއޯއެމްއަށް އިތުރުކޮށްފައިވުމުންނެވެ. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})