ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
in English

ຄຳແນະນຳ

ເອກະສານແລະຕົວຢ່າງສໍາລັບການເພີ່ມຄໍາແນະນໍາເຄື່ອງມື Bootstrap ທີ່ມີ CSS ແລະ JavaScript ໂດຍໃຊ້ CSS3 ສໍາລັບພາບເຄື່ອນໄຫວແລະ data-bs-attributes ສໍາລັບການເກັບຮັກສາຫົວຂໍ້ທ້ອງຖິ່ນ.

ໃນໜ້ານີ້

ພາບລວມ

ສິ່ງທີ່ຄວນຮູ້ໃນເວລາໃຊ້ plugintip ເຄື່ອງມື:

  • ຄໍາແນະນໍາເຄື່ອງມືແມ່ນອີງໃສ່ຫ້ອງສະຫມຸດພາກສ່ວນທີສາມ Popper ສໍາລັບການຈັດຕໍາແຫນ່ງ. ທ່ານຕ້ອງປະກອບ popper.min.js ກ່ອນ bootstrap.js ຫຼືໃຊ້ bootstrap.bundle.min.js/ bootstrap.bundle.jsທີ່ມີ Popper ເພື່ອໃຫ້ຄໍາແນະນໍາເຄື່ອງມືເຮັດວຽກ!
  • ຄໍາແນະນໍາເຄື່ອງມືແມ່ນເລືອກເຂົ້າສໍາລັບເຫດຜົນການປະຕິບັດ, ດັ່ງນັ້ນ ທ່ານຕ້ອງເລີ່ມຕົ້ນດ້ວຍຕົນເອງ .
  • ຄໍາແນະນໍາເຄື່ອງມືທີ່ມີຊື່ສູນແມ່ນບໍ່ເຄີຍສະແດງ.
  • ລະບຸ container: 'body'ເພື່ອຫຼີກເວັ້ນການສະແດງບັນຫາໃນອົງປະກອບທີ່ສັບສົນຫຼາຍ (ເຊັ່ນ: ກຸ່ມການປ້ອນຂໍ້ມູນຂອງພວກເຮົາ, ກຸ່ມປຸ່ມ, ແລະອື່ນໆ).
  • ການກະຕຸ້ນຄໍາແນະນໍາກ່ຽວກັບອົງປະກອບທີ່ເຊື່ອງໄວ້ຈະບໍ່ເຮັດວຽກ.
  • ຄໍາແນະນໍາເຄື່ອງມືສໍາລັບ .disabledຫຼື disabledອົງປະກອບຕ້ອງໄດ້ຮັບການກະຕຸ້ນຢູ່ໃນອົງປະກອບ wrapper.
  • ເມື່ອຖືກກະຕຸ້ນຈາກ hyperlinks ທີ່ຂະຫຍາຍຫຼາຍສາຍ, ຄໍາແນະນໍາເຄື່ອງມືຈະຖືກຈຸດສູນກາງ. ໃຊ້ white-space: nowrap;ໃນ <a>s ຂອງທ່ານເພື່ອຫຼີກເວັ້ນການພຶດຕິກໍານີ້.
  • ຄໍາແນະນໍາເຄື່ອງມືຕ້ອງຖືກເຊື່ອງໄວ້ກ່ອນທີ່ອົງປະກອບທີ່ສອດຄ້ອງກັນຂອງພວກມັນຈະຖືກລຶບອອກຈາກ DOM.
  • ຄໍາແນະນໍາເຄື່ອງມືສາມາດຖືກກະຕຸ້ນຍ້ອນອົງປະກອບພາຍໃນເງົາ DOM.
ໂດຍຄ່າເລີ່ມຕົ້ນ, ອົງປະກອບນີ້ໃຊ້ເຄື່ອງອະນາໄມທີ່ມີເນື້ອຫາໃນຕົວ, ເຊິ່ງກໍາຈັດອົງປະກອບ HTML ທີ່ບໍ່ໄດ້ຮັບອະນຸຍາດຢ່າງຊັດເຈນ. ເບິ່ງ ພາກສ່ວນເຄື່ອງອະນາໄມໃນເອກະສານ JavaScript ຂອງພວກເຮົາ ສໍາລັບລາຍລະອຽດເພີ່ມເຕີມ.
ຜົນກະທົບຂອງພາບເຄື່ອນໄຫວຂອງອົງປະກອບນີ້ແມ່ນຂຶ້ນກັບການ 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)
})

ຕົວຢ່າງ

ເລື່ອນໃສ່ລິ້ງດ້ານລຸ່ມເພື່ອເບິ່ງຄຳແນະນຳ:

ຂໍ້ຄວາມຕົວຍຶດບ່ອນເພື່ອສະແດງການ ເຊື່ອມຕໍ່ໃນ ແຖວທີ່ມີຄໍາແນະນໍາເຄື່ອງມື. ນີ້ແມ່ນພຽງແຕ່ filler, ບໍ່ມີ killer. ເນື້ອ​ໃນ​ທີ່​ວາງ​ໄວ້​ຢູ່​ທີ່​ນີ້​ພຽງ​ແຕ່​ເພື່ອ​ເຮັດ​ໃຫ້​ມີ​ການ​ມີ​ຕົວ ​ຈິງ​ຂອງ​ຂໍ້​ຄວາມ ​. ແລະທັງໝົດນັ້ນພຽງແຕ່ເພື່ອໃຫ້ເຈົ້າຮູ້ວ່າຄໍາແນະນໍາເຄື່ອງມືຈະເບິ່ງແນວໃດເມື່ອໃຊ້ໃນສະຖານະການຕົວຈິງ. ດັ່ງນັ້ນ, ຫວັງວ່າຕອນນີ້ເຈົ້າໄດ້ເຫັນວິທີການ ເຫຼົ່ານີ້ຄໍາແນະນໍາກ່ຽວກັບການເຊື່ອມຕໍ່ ສາມາດເຮັດວຽກໃນການປະຕິບັດ, ເມື່ອທ່ານໃຊ້ພວກມັນຢູ່ໃນ ເວັບໄຊທ໌ຫຼືໂຄງການ ຂອງທ່ານເອງ .

ເລື່ອນໃສ່ປຸ່ມຕ່າງໆຂ້າງລຸ່ມນີ້ເພື່ອເບິ່ງສີ່ທິດທາງຄໍາແນະນໍາ: ເທິງ, ຂວາ, ລຸ່ມ, ແລະຊ້າຍ. ທິດທາງແມ່ນສະທ້ອນເມື່ອໃຊ້ Bootstrap ໃນ RTL.

<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>

ແລະດ້ວຍການເພີ່ມ HTML ແບບກຳນົດເອງ:

<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>

ດ້ວຍ SVG:

ຊາສ

ຕົວແປ

$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;

ການ​ນໍາ​ໃຊ້

ປັ໊ກອິນຄໍາແນະນໍາເຄື່ອງມືສ້າງເນື້ອຫາແລະເຄື່ອງຫມາຍຕາມຄວາມຕ້ອງການ, ແລະໂດຍຄ່າເລີ່ມຕົ້ນວາງຄໍາແນະນໍາເຄື່ອງມືຫຼັງຈາກອົງປະກອບຂອງຕົວກະຕຸ້ນຂອງພວກເຂົາ.

ກະຕຸ້ນຄໍາແນະນໍາເຄື່ອງມືຜ່ານ JavaScript:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
ລົ້ນ autoແລະscroll

ຕໍາແໜ່ງຄໍາແນະນໍາເຄື່ອງມືພະຍາຍາມປ່ຽນແປງອັດຕະໂນມັດເມື່ອພາຊະນະ ແມ່ ມີ overflow: autoຫຼື overflow: scrollມັກຂອງພວກເຮົາ .table-responsive, ແຕ່ຍັງຄົງຮັກສາການຈັດຕໍາແຫນ່ງຕົ້ນສະບັບໄວ້. ເພື່ອແກ້ໄຂບັນຫານີ້, ກໍານົດ boundaryທາງເລືອກ (ສໍາລັບຕົວແກ້ໄຂ flip ໂດຍໃຊ້ popperConfigທາງເລືອກ) ເປັນ HTMLElement ໃດໆທີ່ຈະ override ຄ່າເລີ່ມຕົ້ນ 'clippingParents', ເຊັ່ນ document.body:

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

ມາກອັບ

markup ທີ່ຕ້ອງການສໍາລັບຄໍາແນະນໍາເຄື່ອງມືແມ່ນພຽງແຕ່ dataຄຸນລັກສະນະແລະ titleໃນອົງປະກອບ HTML ທີ່ທ່ານຕ້ອງການທີ່ຈະມີຄໍາແນະນໍາເຄື່ອງມື. ເຄື່ອງຫມາຍທີ່ສ້າງຂຶ້ນຂອງຄໍາແນະນໍາເຄື່ອງມືແມ່ນງ່າຍດາຍຫຼາຍ, ເຖິງແມ່ນວ່າມັນຕ້ອງການຕໍາແຫນ່ງ (ໂດຍຄ່າເລີ່ມຕົ້ນ, ກໍານົດ topໂດຍ plugin).

ເຮັດໃຫ້ຄໍາແນະນໍາເຄື່ອງມືເຮັດວຽກສໍາລັບຜູ້ໃຊ້ແປ້ນພິມແລະເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ

ທ່ານຄວນເພີ່ມຄໍາແນະນໍາເຄື່ອງມືໃຫ້ກັບອົງປະກອບ HTML ທີ່ເປັນແບບດັ້ງເດີມທີ່ເນັ້ນໃສ່ແປ້ນພິມແລະໂຕ້ຕອບ (ເຊັ່ນ: ການເຊື່ອມຕໍ່ຫຼືການຄວບຄຸມແບບຟອມ). ເຖິງແມ່ນວ່າອົງປະກອບ HTML ທີ່ບໍ່ມັກ (ເຊັ່ນ <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ຄຸນລັກສະນະບໍ່ແມ່ນການໂຕ້ຕອບ, ຊຶ່ງຫມາຍຄວາມວ່າຜູ້ໃຊ້ບໍ່ສາມາດສຸມໃສ່, ເລື່ອນ, ຫຼືຄລິກໃສ່ພວກມັນເພື່ອກະຕຸ້ນຄໍາແນະນໍາເຄື່ອງມື (ຫຼື popover). ໃນ​ຖາ​ນະ​ເປັນ​ການ​ແກ້​ໄຂ​ໄດ້​, ທ່ານ​ຈະ​ຕ້ອງ​ການ​ທີ່​ຈະ​ກະ​ຕຸ້ນ​ຄໍາ​ແນະ​ນໍາ​ຂອງ​ເຄື່ອງ​ມື​ຈາກ wrapper <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>

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-bs-, ໃນ data-bs-animation="". ໃຫ້ແນ່ໃຈວ່າປ່ຽນປະເພດກໍລະນີຂອງຊື່ທາງເລືອກຈາກ camelCase ເປັນ kebab-case ເມື່ອຖ່າຍທອດທາງເລືອກໂດຍຜ່ານຄຸນລັກສະນະຂໍ້ມູນ. ຕົວຢ່າງ, ແທນທີ່ຈະໃຊ້ data-bs-customClass="beautifier", ໃຊ້ data-bs-custom-class="beautifier".

ຈົ່ງຈື່ໄວ້ວ່າສໍາລັບເຫດຜົນດ້ານຄວາມປອດໄພ sanitize, sanitizeFn, ແລະ allowListທາງເລືອກບໍ່ສາມາດຖືກສະຫນອງໂດຍໃຊ້ຄຸນລັກສະນະຂໍ້ມູນ.
ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
animation ບູລີນ true ນຳໃຊ້ການປ່ຽນ CSS ຈືດໆໄປຫາຄຳແນະນຳ
container ຊ່ອຍແນ່ | ອົງປະກອບ | ບໍ່ຖືກຕ້ອງ false

ຕື່ມຄໍາແນະນໍາເຄື່ອງມືໃສ່ກັບອົງປະກອບສະເພາະ. ຕົວຢ່າງ: container: 'body'. ຕົວເລືອກນີ້ແມ່ນເປັນປະໂຫຍດໂດຍສະເພາະໃນທີ່ມັນອະນຸຍາດໃຫ້ທ່ານຈັດວາງຄໍາແນະນໍາເຄື່ອງມືໃນການໄຫຼເຂົ້າຂອງເອກະສານຢູ່ໃກ້ກັບອົງປະກອບກະຕຸ້ນ - ເຊິ່ງຈະປ້ອງກັນບໍ່ໃຫ້ຄໍາແນະນໍາເຄື່ອງມືຈາກການເລື່ອນອອກຈາກອົງປະກອບກະຕຸ້ນໃນລະຫວ່າງການປັບຂະຫນາດຂອງປ່ອງຢ້ຽມ.
delay ເລກ | ວັດຖຸ 0

ເລື່ອນການສະແດງ ແລະເຊື່ອງຄໍາແນະນໍາເຄື່ອງມື (ms) - ບໍ່ໃຊ້ກັບປະເພດຕົວກະຕຸ້ນຄູ່ມື

ຖ້າມີຕົວເລກໃຫ້, ການຊັກຊ້າແມ່ນໃຊ້ກັບທັງເຊື່ອງ / ສະແດງ

ໂຄງສ້າງວັດຖຸແມ່ນ:delay: { "show": 500, "hide": 100 }
html ບູລີນ false

ອະນຸຍາດໃຫ້ HTML ໃນຄໍາແນະນໍາເຄື່ອງມື.

ຖ້າເປັນຄວາມຈິງ, ແທັກ HTML ໃນຄໍາແນະນໍາຂອງເຄື່ອງມື titleຈະຖືກສະແດງຢູ່ໃນຄໍາແນະນໍາເຄື່ອງມື. ຖ້າເປັນຜິດ, innerTextຄຸນສົມບັດຈະຖືກໃຊ້ເພື່ອໃສ່ເນື້ອຫາເຂົ້າໄປໃນ DOM.

ໃຊ້ຂໍ້ຄວາມຖ້າທ່ານກັງວົນກ່ຽວກັບການໂຈມຕີ XSS.
placement ຊ່ອຍແນ່ | ຫນ້າທີ່ 'top'

ວິທີການຈັດຕໍາແຫນ່ງຄໍາແນະນໍາເຄື່ອງມື - ອັດຕະໂນມັດ | ເທິງ | ລຸ່ມ | ຊ້າຍ | ຖືກຕ້ອງ.
ເມື່ອ autoຖືກລະບຸໄວ້, ມັນຈະປ່ຽນທິດທາງເຄື່ອງມືແບບໄດນາມິກ.

ເມື່ອຟັງຊັນໃດນຶ່ງຖືກໃຊ້ເພື່ອກໍານົດການຈັດວາງ, ມັນຖືກເອີ້ນດ້ວຍແຖບເຄື່ອງມື DOM node ເປັນອາກິວເມັນທຳອິດຂອງມັນ ແລະອົງປະກອບທີ່ກະຕຸ້ນ DOM node ເປັນອັນທີສອງຂອງມັນ. ສະ thisພາບການຖືກຕັ້ງເປັນຕົວຢ່າງເຄື່ອງມື.
selector ຊ່ອຍແນ່ | ບໍ່ຖືກຕ້ອງ false ຖ້າຕົວເລືອກຖືກສະໜອງໃຫ້, ເຄື່ອງມືແນະນຳວັດຖຸຈະຖືກມອບໝາຍໃຫ້ເປົ້າໝາຍທີ່ລະບຸໄວ້. ໃນທາງປະຕິບັດ, ນີ້ຖືກນໍາໃຊ້ເພື່ອນໍາໃຊ້ຄໍາແນະນໍາເຄື່ອງມືເພື່ອເພີ່ມອົງປະກອບ DOM ( jQuery.onສະຫນັບສະຫນູນ). ເບິ່ງ ນີ້ ແລະ ຕົວຢ່າງຂໍ້ມູນ .
template ສາຍ '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ພື້ນຖານ HTML ທີ່ຈະໃຊ້ໃນເວລາສ້າງຄໍາແນະນໍາເຄື່ອງມື.

ຄໍາແນະນໍາຂອງເຄື່ອງມື titleຈະຖືກສີດເຂົ້າໄປໃນ .tooltip-inner.

.tooltip-arrowຈະກາຍເປັນລູກສອນຂອງຄໍາແນະນໍາ.

ອົງປະກອບ wrapper ຊັ້ນນອກທີ່ສຸດຄວນຈະມີ .tooltipຊັ້ນຮຽນແລະ role="tooltip".
title ຊ່ອຍແນ່ | ອົງປະກອບ | ຫນ້າທີ່ ''

ຄ່າເລີ່ມຕົ້ນຂອງຫົວຂໍ້ຖ້າ titleຄຸນສົມບັດບໍ່ມີຢູ່.

ຖ້າຟັງຊັນຖືກມອບໃຫ້, ມັນຈະຖືກເອີ້ນດ້ວຍການ thisອ້າງອິງຂອງມັນກັບອົງປະກອບທີ່ຄໍາແນະນໍາເຄື່ອງມືຕິດຢູ່.
trigger ສາຍ 'hover focus'

ຄໍາແນະນໍາເຄື່ອງມືຖືກກະຕຸ້ນແນວໃດ - ຄລິກ | hover | ສຸມ | ຄູ່ມື. ທ່ານອາດຈະຜ່ານຫຼາຍ triggers; ແຍກພວກມັນດ້ວຍຊ່ອງຫວ່າງ.

'manual'ຊີ້ໃຫ້ເຫັນວ່າຄໍາແນະນໍາເຄື່ອງມືຈະຖືກກະຕຸ້ນດ້ວຍໂປຣແກຣມໂດຍຜ່ານ .show(), .hide()ແລະ .toggle()ວິທີການ; ຄ່ານີ້ບໍ່ສາມາດຖືກລວມເຂົ້າກັບຕົວກະຕຸ້ນອື່ນໆໄດ້.

'hover'ຂອງມັນເອງຈະສົ່ງຜົນໃຫ້ຄໍາແນະນໍາເຄື່ອງມືທີ່ບໍ່ສາມາດຖືກກະຕຸ້ນຜ່ານແປ້ນພິມໄດ້, ແລະຄວນຈະຖືກນໍາໃຊ້ພຽງແຕ່ຖ້າວິທີການທາງເລືອກໃນການຖ່າຍທອດຂໍ້ມູນດຽວກັນສໍາລັບຜູ້ໃຊ້ແປ້ນພິມ.
fallbackPlacements array ['top', 'right', 'bottom', 'left'] ກຳນົດການຈັດຕຳແໜ່ງສຳຮອງໂດຍການສະໜອງລາຍຊື່ການຈັດວາງໃນອາເຣ (ຕາມລຳດັບຄວາມມັກ). ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານພຶດຕິກໍາ ຂອງ Popper
boundary ຊ່ອຍແນ່ | ອົງປະກອບ 'clippingParents' ຂອບເຂດຈໍາກັດ overflow ຂອງຄໍາແນະນໍາເຄື່ອງມື (ໃຊ້ກັບຕົວແກ້ໄຂການປ້ອງກັນການ overflow ຂອງ Popper ເທົ່ານັ້ນ). ໂດຍຄ່າເລີ່ມຕົ້ນມັນເປັນ 'clippingParents'ແລະສາມາດຍອມຮັບການອ້າງອີງ HTMLElement (ຜ່ານ JavaScript ເທົ່ານັ້ນ). ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານ detectOverflow ຂອງ Popper .
customClass ຊ່ອຍແນ່ | ຫນ້າທີ່ ''

ເພີ່ມຫ້ອງຮຽນໃສ່ຄໍາແນະນໍາເຄື່ອງມືເມື່ອມັນຖືກສະແດງ. ຈົ່ງຈື່ໄວ້ວ່າຊັ້ນຮຽນເຫຼົ່ານີ້ຈະຖືກເພີ່ມໃສ່ນອກເໜືອໄປຈາກຊັ້ນຮຽນໃດນຶ່ງທີ່ລະບຸໄວ້ໃນແມ່ແບບ. ເພື່ອເພີ່ມຫຼາຍຊັ້ນຮຽນ, ແຍກພວກມັນດ້ວຍຍະຫວ່າງ: 'class-1 class-2'.

ທ່ານຍັງສາມາດຜ່ານຟັງຊັນທີ່ຄວນສົ່ງຄືນສະຕຣິງດຽວທີ່ມີຊື່ຊັ້ນຮຽນເພີ່ມເຕີມ.
sanitize ບູລີນ true ເປີດຫຼືປິດການອະນາໄມ. ຖ້າເປີດໃຊ້ 'template'ແລະ 'title'ຕົວເລືອກຈະຖືກອະນາໄມ. ເບິ່ງ ພາກສ່ວນເຄື່ອງອະນາໄມໃນເອກະສານ JavaScript ຂອງພວກເຮົາ .
allowList ວັດຖຸ ຄ່າເລີ່ມຕົ້ນ ວັດຖຸທີ່ມີຄຸນລັກສະນະ ແລະແທັກທີ່ອະນຸຍາດ
sanitizeFn null | ຫນ້າທີ່ null ໃນທີ່ນີ້ທ່ານສາມາດສະຫນອງຫນ້າທີ່ສຸຂາພິບານຂອງທ່ານເອງ. ນີ້ສາມາດເປັນປະໂຫຍດຖ້າທ່ານຕ້ອງການໃຊ້ຫ້ອງສະຫມຸດສະເພາະເພື່ອເຮັດການອະນາໄມ.
offset array | ຊ່ອຍແນ່ | ຫນ້າທີ່ [0, 0]

ຊົດເຊີຍຂອງຄໍາແນະນໍາເຄື່ອງມືທຽບກັບເປົ້າຫມາຍຂອງມັນ. ທ່ານສາມາດຖ່າຍທອດສະຕຣິງໃນຄຸນລັກສະນະຂໍ້ມູນດ້ວຍຄ່າທີ່ແຍກດ້ວຍເຄື່ອງໝາຍຈຸດເຊັ່ນ:data-bs-offset="10,20"

ເມື່ອຟັງຊັນຖືກນໍາໃຊ້ເພື່ອກໍານົດການຊົດເຊີຍ, ມັນຖືກເອີ້ນວ່າວັດຖຸທີ່ມີການຈັດວາງ popper, ການອ້າງອີງ, ແລະ popper rects ເປັນການໂຕ້ຖຽງທໍາອິດຂອງມັນ. ອົງປະກອບກະຕຸ້ນ DOM node ແມ່ນຜ່ານເປັນອາກິວເມັນທີສອງ. ຟັງຊັນຕ້ອງສົ່ງຄືນ array ທີ່ມີສອງຕົວເລກ: .[skidding, distance]

ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານຊົດເຊີຍ ຂອງ Popper .
popperConfig null | ວັດຖຸ | ຫນ້າທີ່ null

ເພື່ອປ່ຽນການຕັ້ງຄ່າ Popper ເລີ່ມຕົ້ນຂອງ Bootstrap, ເບິ່ງ ການຕັ້ງຄ່າຂອງ Popper .

ເມື່ອຟັງຊັນຖືກໃຊ້ເພື່ອສ້າງການຕັ້ງຄ່າ Popper, ມັນຖືກເອີ້ນດ້ວຍວັດຖຸທີ່ມີການຕັ້ງຄ່າ Popper ເລີ່ມຕົ້ນຂອງ Bootstrap. ມັນຊ່ວຍໃຫ້ທ່ານໃຊ້ແລະລວມຄ່າເລີ່ມຕົ້ນກັບການຕັ້ງຄ່າຂອງທ່ານເອງ. ຟັງຊັນຕ້ອງສົ່ງຄືນວັດຖຸການຕັ້ງຄ່າສໍາລັບ Popper.

ຄຸນລັກສະນະຂໍ້ມູນສໍາລັບຄໍາແນະນໍາເຄື່ອງມືສ່ວນບຸກຄົນ

ທາງ​ເລືອກ​ສໍາ​ລັບ​ຄໍາ​ແນະ​ນໍາ​ຂອງ​ບຸກ​ຄົນ​ເປັນ​ທາງ​ເລືອກ​ທີ່​ສາ​ມາດ​ໄດ້​ຮັບ​ການ​ລະ​ບຸ​ໂດຍ​ການ​ນໍາ​ໃຊ້​ຄຸນ​ລັກ​ສະ​ນະ​ຂໍ້​ມູນ​, ດັ່ງ​ທີ່​ອະ​ທິ​ບາຍ​ຂ້າງ​ເທິງ​.

ການນໍາໃຊ້ຟັງຊັນທີ່ມີpopperConfig

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

ວິທີການ

ວິ​ທີ​ການ asynchronous ແລະ​ການ​ຫັນ​ປ່ຽນ​

ວິທີການ API ທັງໝົດແມ່ນ asynchronous ແລະເລີ່ມການ ຫັນປ່ຽນ . ພວກເຂົາກັບຄືນໄປຫາຜູ້ໂທທັນທີທີ່ການຫັນປ່ຽນເລີ່ມຕົ້ນແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດລົງ . ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .

ເບິ່ງເອກະສານ JavaScript ຂອງພວກເຮົາສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ .

ສະແດງໃຫ້ເຫັນ

ເປີດເຜີຍຄໍາແນະນໍາຂອງອົງປະກອບ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຄໍາແນະນໍາເຄື່ອງມືໄດ້ຖືກສະແດງໃຫ້ເຫັນຕົວຈິງ (ເຊັ່ນ: ກ່ອນທີ່ shown.bs.tooltipເຫດການຈະເກີດຂື້ນ). ນີ້ຖືວ່າເປັນ "ຄູ່ມື" ການກະຕຸ້ນຂອງຄໍາແນະນໍາເຄື່ອງມື. ຄໍາແນະນໍາເຄື່ອງມືທີ່ມີຊື່ສູນແມ່ນບໍ່ເຄີຍສະແດງ.

tooltip.show()

ເຊື່ອງ

ເຊື່ອງຄໍາແນະນໍາຂອງອົງປະກອບ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຄໍາແນະນໍາເຄື່ອງມືໄດ້ຖືກເຊື່ອງໄວ້ຕົວຈິງ (ເຊັ່ນ: ກ່ອນທີ່ hidden.bs.tooltipເຫດການຈະເກີດຂື້ນ). ນີ້ຖືວ່າເປັນ "ຄູ່ມື" ການກະຕຸ້ນຂອງຄໍາແນະນໍາເຄື່ອງມື.

tooltip.hide()

ສະຫຼັບ

ສະຫຼັບຄຳແນະນຳຂອງອົງປະກອບໃດໜຶ່ງ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຄໍາແນະນໍາເຄື່ອງມືໄດ້ຖືກສະແດງໃຫ້ເຫັນຫຼືເຊື່ອງໄວ້ (ເຊັ່ນວ່າກ່ອນທີ່ເຫດການ shown.bs.tooltipຫຼື hidden.bs.tooltipເຫດການຈະເກີດຂື້ນ). ນີ້ຖືວ່າເປັນ "ຄູ່ມື" ການກະຕຸ້ນຂອງຄໍາແນະນໍາເຄື່ອງມື.

tooltip.toggle()

ຖິ້ມ

ເຊື່ອງ ແລະທຳລາຍຄຳແນະນຳຂອງອົງປະກອບໃດໜຶ່ງ (ລຶບຂໍ້ມູນທີ່ເກັບໄວ້ໃນອົງປະກອບ DOM). ຄໍາແນະນໍາເຄື່ອງມືທີ່ໃຊ້ການມອບຫມາຍ (ທີ່ຖືກສ້າງຂຶ້ນໂດຍໃຊ້ ຕົວ selectorເລືອກ ) ບໍ່ສາມາດຖືກທໍາລາຍເປັນສ່ວນບຸກຄົນໃນອົງປະກອບ trigger ສືບທອດ.

tooltip.dispose()

ເປີດໃຊ້

ໃຫ້ຄໍາແນະນໍາເຄື່ອງມືຂອງອົງປະກອບທີ່ມີຄວາມສາມາດໃນການສະແດງໃຫ້ເຫັນ. ຄໍາແນະນໍາເຄື່ອງມືຖືກເປີດໃຊ້ໂດຍຄ່າເລີ່ມຕົ້ນ.

tooltip.enable()

ປິດການໃຊ້ງານ

ເອົາຄວາມສາມາດອອກສໍາລັບຄໍາແນະນໍາເຄື່ອງມືຂອງອົງປະກອບທີ່ຈະສະແດງໃຫ້ເຫັນ. ຄໍາແນະນໍາເຄື່ອງມືຈະສາມາດສະແດງໄດ້ພຽງແຕ່ຖ້າມັນຖືກເປີດໃຊ້ໃຫມ່.

tooltip.disable()

ສະຫຼັບເປີດ

ສະຫຼັບຄວາມສາມາດສໍາລັບຄໍາແນະນໍາເຄື່ອງມືຂອງອົງປະກອບທີ່ຈະສະແດງໃຫ້ເຫັນຫຼືເຊື່ອງໄວ້.

tooltip.toggleEnabled()

ອັບເດດ

ອັບເດດຕຳແໜ່ງຂອງຄຳແນະນຳຂອງອົງປະກອບໃດໜຶ່ງ.

tooltip.update()

getInstance

ວິທີການ ຄົງ ທີ່ທີ່ຊ່ວຍໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງຄໍາແນະນໍາທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM

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

getOrCreateInstance

ວິທີການ ຄົງ ທີ່ທີ່ຊ່ວຍໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງຄໍາແນະນໍາເຄື່ອງມືທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM, ຫຼືສ້າງໃຫມ່ໃນກໍລະນີທີ່ມັນບໍ່ໄດ້ຖືກເລີ່ມຕົ້ນ.

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

ເຫດການ

ປະເພດເຫດການ ລາຍລະອຽດ
show.bs.tooltip ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ showວິທີການຕົວຢ່າງຖືກເອີ້ນ.
shown.bs.tooltip ເຫດການນີ້ຖືກຍິງອອກເມື່ອຄໍາແນະນໍາເຄື່ອງມືໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ເຫັນໄດ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ).
hide.bs.tooltip ເຫດການນີ້ຈະຖືກຍິງອອກທັນທີເມື່ອ hideວິທີການຕົວຢ່າງຖືກເອີ້ນ.
hidden.bs.tooltip ເຫດການນີ້ຖືກໄລ່ອອກເມື່ອຄໍາແນະນໍາເຄື່ອງມືໄດ້ຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ແລ້ວ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ).
inserted.bs.tooltip ເຫດການນີ້ຖືກໄລ່ອອກຫຼັງຈາກ show.bs.tooltipເຫດການເມື່ອແມ່ແບບຄໍາແນະນໍາເຄື່ອງມືໄດ້ຖືກເພີ່ມໃສ່ DOM. 
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()