ຄຳແນະນຳ
ເອກະສານແລະຕົວຢ່າງສໍາລັບການເພີ່ມຄໍາແນະນໍາເຄື່ອງມື Bootstrap ທີ່ມີ CSS ແລະ JavaScript ໂດຍໃຊ້ CSS3 ສໍາລັບພາບເຄື່ອນໄຫວແລະຂໍ້ມູນ - ຄຸນລັກສະນະສໍາລັບການເກັບຮັກສາຫົວຂໍ້ທ້ອງຖິ່ນ.
ພາບລວມ
ສິ່ງທີ່ຄວນຮູ້ໃນເວລາໃຊ້ plugintip ເຄື່ອງມື:
- ຄໍາແນະນໍາເຄື່ອງມືແມ່ນອີງໃສ່ຫ້ອງສະຫມຸດພາກສ່ວນທີສາມ Popper ສໍາລັບການຈັດຕໍາແຫນ່ງ. ທ່ານຕ້ອງປະກອບ popper.min.js ກ່ອນ bootstrap.js ຫຼືໃຊ້
bootstrap.bundle.min.js
/bootstrap.bundle.js
ທີ່ມີ Popper ເພື່ອໃຫ້ຄໍາແນະນໍາເຄື່ອງມືເຮັດວຽກ! - ຖ້າທ່ານກໍາລັງສ້າງ JavaScript ຂອງພວກເຮົາຈາກແຫຼ່ງ, ມັນ ຕ້ອງການ
util.js
. - ຄໍາແນະນໍາເຄື່ອງມືແມ່ນເລືອກເຂົ້າສໍາລັບເຫດຜົນການປະຕິບັດ, ດັ່ງນັ້ນ ທ່ານຕ້ອງເລີ່ມຕົ້ນດ້ວຍຕົນເອງ .
- ຄໍາແນະນໍາເຄື່ອງມືທີ່ມີຊື່ສູນແມ່ນບໍ່ເຄີຍສະແດງ.
- ລະບຸ
container: 'body'
ເພື່ອຫຼີກເວັ້ນການສະແດງບັນຫາໃນອົງປະກອບທີ່ສັບສົນຫຼາຍ (ເຊັ່ນ: ກຸ່ມການປ້ອນຂໍ້ມູນຂອງພວກເຮົາ, ກຸ່ມປຸ່ມ, ແລະອື່ນໆ). - ການກະຕຸ້ນຄໍາແນະນໍາກ່ຽວກັບອົງປະກອບທີ່ເຊື່ອງໄວ້ຈະບໍ່ເຮັດວຽກ.
- ຄໍາແນະນໍາເຄື່ອງມືສໍາລັບ
.disabled
ຫຼືdisabled
ອົງປະກອບຕ້ອງໄດ້ຮັບການກະຕຸ້ນຢູ່ໃນອົງປະກອບ wrapper. - ເມື່ອຖືກກະຕຸ້ນຈາກ hyperlinks ທີ່ຂະຫຍາຍຫຼາຍສາຍ, ຄໍາແນະນໍາເຄື່ອງມືຈະຖືກຈຸດສູນກາງ. ໃຊ້
white-space: nowrap;
ໃນ<a>
s ຂອງທ່ານເພື່ອຫຼີກເວັ້ນການພຶດຕິກໍານີ້. - ຄໍາແນະນໍາເຄື່ອງມືຕ້ອງຖືກເຊື່ອງໄວ້ກ່ອນທີ່ອົງປະກອບທີ່ສອດຄ້ອງກັນຂອງພວກມັນຈະຖືກລຶບອອກຈາກ DOM.
- ຄໍາແນະນໍາເຄື່ອງມືສາມາດຖືກກະຕຸ້ນຍ້ອນອົງປະກອບພາຍໃນເງົາ DOM.
prefers-reduced-motion
ສອບຖາມສື່. ເບິ່ງ
ພາກສ່ວນການເຄື່ອນໄຫວທີ່ຫຼຸດລົງຂອງເອກະສານການຊ່ວຍເຂົ້າເຖິງຂອງພວກເຮົາ .
ໄດ້ທັງໝົດບໍ? ດີຫຼາຍ, ໃຫ້ເບິ່ງວ່າພວກເຂົາເຮັດວຽກແນວໃດກັບບາງຕົວຢ່າງ.
ຕົວຢ່າງ: ເປີດໃຊ້ຄໍາແນະນໍາເຄື່ອງມືຢູ່ທົ່ວທຸກແຫ່ງ
ວິທີໜຶ່ງເພື່ອເລີ່ມຕົ້ນຄຳແນະນຳເຄື່ອງມືທັງໝົດໃນໜ້າໃດໜຶ່ງຈະເປັນການເລືອກພວກມັນຕາມ data-toggle
ຄຸນລັກສະນະຂອງພວກມັນ:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
ຕົວຢ່າງ
ເລື່ອນໃສ່ລິ້ງດ້ານລຸ່ມເພື່ອເບິ່ງຄຳແນະນຳ:
ຂໍ້ຄວາມຕົວຍຶດບ່ອນເພື່ອສະແດງການ ເຊື່ອມຕໍ່ໃນ ແຖວທີ່ມີຄໍາແນະນໍາເຄື່ອງມື. ນີ້ແມ່ນພຽງແຕ່ filler, ບໍ່ມີ killer. ເນື້ອໃນທີ່ວາງໄວ້ຢູ່ທີ່ນີ້ພຽງແຕ່ເພື່ອເຮັດໃຫ້ມີການມີຕົວ ຈິງຂອງຂໍ້ຄວາມ . ແລະທັງໝົດນັ້ນພຽງແຕ່ເພື່ອໃຫ້ເຈົ້າຮູ້ວ່າຄໍາແນະນໍາເຄື່ອງມືຈະເບິ່ງແນວໃດເມື່ອໃຊ້ໃນສະຖານະການຕົວຈິງ. ດັ່ງນັ້ນ, ຫວັງວ່າຕອນນີ້ເຈົ້າໄດ້ເຫັນວິທີການ ເຫຼົ່ານີ້ຄໍາແນະນໍາກ່ຽວກັບການເຊື່ອມຕໍ່ ສາມາດເຮັດວຽກໃນການປະຕິບັດ, ເມື່ອທ່ານໃຊ້ພວກມັນຢູ່ໃນ ເວັບໄຊທ໌ຫຼືໂຄງການ ຂອງທ່ານເອງ .
ເລື່ອນໃສ່ປຸ່ມຕ່າງໆຂ້າງລຸ່ມນີ້ເພື່ອເບິ່ງສີ່ທິດທາງຄໍາແນະນໍາ: ເທິງ, ຂວາ, ລຸ່ມ, ແລະຊ້າຍ.
<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>
ແລະດ້ວຍການເພີ່ມ HTML ແບບກຳນົດເອງ:
<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>
ການນໍາໃຊ້
ປັ໊ກອິນຄໍາແນະນໍາເຄື່ອງມືສ້າງເນື້ອຫາແລະເຄື່ອງຫມາຍຕາມຄວາມຕ້ອງການ, ແລະໂດຍຄ່າເລີ່ມຕົ້ນວາງຄໍາແນະນໍາເຄື່ອງມືຫຼັງຈາກອົງປະກອບຂອງຕົວກະຕຸ້ນຂອງພວກເຂົາ.
ກະຕຸ້ນຄໍາແນະນໍາເຄື່ອງມືຜ່ານ JavaScript:
$('#example').tooltip(options)
ລົ້ນ auto
ແລະscroll
ຕໍາແໜ່ງຄໍາແນະນໍາເຄື່ອງມືພະຍາຍາມປ່ຽນແປງອັດຕະໂນມັດເມື່ອພາຊະນະແມ່ມີ overflow: auto
ຫຼື overflow: scroll
ມັກຂອງພວກເຮົາ .table-responsive
, ແຕ່ຍັງຄົງຮັກສາການຈັດຕໍາແຫນ່ງຕົ້ນສະບັບໄວ້. ເພື່ອແກ້ໄຂ, ໃຫ້ຕັ້ງ boundary
ທາງເລືອກເປັນອັນອື່ນນອກເໜືອໄປຈາກຄ່າເລີ່ມຕົ້ນ 'scrollParent'
, ເຊັ່ນ 'window'
:
$('#example').tooltip({ boundary: 'window' })
ມາກອັບ
markup ທີ່ຕ້ອງການສໍາລັບຄໍາແນະນໍາເຄື່ອງມືແມ່ນພຽງແຕ່ data
ຄຸນລັກສະນະແລະ title
ໃນອົງປະກອບ HTML ທີ່ທ່ານຕ້ອງການທີ່ຈະມີຄໍາແນະນໍາເຄື່ອງມື. ເຄື່ອງຫມາຍທີ່ສ້າງຂຶ້ນຂອງຄໍາແນະນໍາເຄື່ອງມືແມ່ນງ່າຍດາຍຫຼາຍ, ເຖິງແມ່ນວ່າມັນຕ້ອງການຕໍາແຫນ່ງ (ໂດຍຄ່າເລີ່ມຕົ້ນ, ກໍານົດ top
ໂດຍ plugin).
ເຮັດໃຫ້ຄໍາແນະນໍາເຄື່ອງມືເຮັດວຽກສໍາລັບຜູ້ໃຊ້ແປ້ນພິມແລະເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ
ທ່ານຄວນເພີ່ມຄໍາແນະນໍາເຄື່ອງມືໃຫ້ກັບອົງປະກອບ HTML ທີ່ເປັນແບບດັ້ງເດີມທີ່ເນັ້ນໃສ່ແປ້ນພິມແລະໂຕ້ຕອບ (ເຊັ່ນ: ການເຊື່ອມຕໍ່ຫຼືການຄວບຄຸມແບບຟອມ). ເຖິງແມ່ນວ່າອົງປະກອບ HTML ທີ່ບໍ່ມັກ (ເຊັ່ນ <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
ຄຸນລັກສະນະບໍ່ແມ່ນການໂຕ້ຕອບ, ຊຶ່ງຫມາຍຄວາມວ່າຜູ້ໃຊ້ບໍ່ສາມາດສຸມໃສ່, ເລື່ອນ, ຫຼືຄລິກໃສ່ພວກມັນເພື່ອກະຕຸ້ນຄໍາແນະນໍາເຄື່ອງມື (ຫຼື popover). ໃນຖານະເປັນວິທີການແກ້ໄຂ, ທ່ານຕ້ອງການກະຕຸ້ນຄໍາແນະນໍາເຄື່ອງມືຈາກ wrapper <div>
ຫຼື <span>
, ໂດຍສະເພາະທີ່ສ້າງແປ້ນພິມສຸມໃສ່ການນໍາໃຊ້ tabindex="0"
, ແລະ override 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>
ທາງເລືອກ
ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-
, ໃນ data-animation=""
.
sanitize
,
sanitizeFn
ແລະ
whiteList
ທາງເລືອກບໍ່ສາມາດສະໜອງໃຫ້ໂດຍໃຊ້ຄຸນສົມບັດຂໍ້ມູນ.
ຊື່ | ປະເພດ | ຄ່າເລີ່ມຕົ້ນ | ລາຍລະອຽດ |
---|---|---|---|
ພາບເຄື່ອນໄຫວ | ບູລີນ | ຄວາມຈິງ | ນຳໃຊ້ການປ່ຽນ CSS ຈືດໆໄປຫາຄຳແນະນຳ |
ບັນຈຸ | ຊ່ອຍແນ່ | ອົງປະກອບ | ບໍ່ຖືກຕ້ອງ | ບໍ່ຖືກຕ້ອງ | ຕື່ມຄໍາແນະນໍາເຄື່ອງມືໃສ່ກັບອົງປະກອບສະເພາະ. ຕົວຢ່າງ: |
ຊັກຊ້າ | ເລກ | ວັດຖຸ | 0 | ເລື່ອນການສະແດງ ແລະເຊື່ອງຄໍາແນະນໍາເຄື່ອງມື (ms) - ບໍ່ໃຊ້ກັບປະເພດຕົວກະຕຸ້ນຄູ່ມື ຖ້າມີຕົວເລກໃຫ້, ການຊັກຊ້າແມ່ນໃຊ້ກັບທັງເຊື່ອງ / ສະແດງ ໂຄງສ້າງວັດຖຸແມ່ນ: |
html | ບູລີນ | ບໍ່ຖືກຕ້ອງ | ອະນຸຍາດໃຫ້ HTML ໃນຄໍາແນະນໍາເຄື່ອງມື. ຖ້າເປັນຄວາມຈິງ, ແທັກ HTML ໃນຄໍາແນະນໍາຂອງເຄື່ອງມື ໃຊ້ຂໍ້ຄວາມຖ້າທ່ານກັງວົນກ່ຽວກັບການໂຈມຕີ XSS. |
ການຈັດວາງ | ຊ່ອຍແນ່ | ຫນ້າທີ່ | 'ເທິງ' | ວິທີການຈັດຕໍາແຫນ່ງຄໍາແນະນໍາເຄື່ອງມື - ອັດຕະໂນມັດ | ເທິງ | ລຸ່ມ | ຊ້າຍ | ຖືກຕ້ອງ. ເມື່ອຟັງຊັນໃດນຶ່ງຖືກໃຊ້ເພື່ອກໍານົດການຈັດວາງ, ມັນຖືກເອີ້ນດ້ວຍແຖບເຄື່ອງມື DOM node ເປັນອາກິວເມັນທຳອິດຂອງມັນ ແລະອົງປະກອບທີ່ກະຕຸ້ນ DOM node ເປັນອັນທີສອງຂອງມັນ. ສະ |
ໂຕເລືອກ | ຊ່ອຍແນ່ | ບໍ່ຖືກຕ້ອງ | ບໍ່ຖືກຕ້ອງ | ຖ້າຕົວເລືອກຖືກສະໜອງໃຫ້, ເຄື່ອງມືແນະນຳວັດຖຸຈະຖືກມອບໝາຍໃຫ້ເປົ້າໝາຍທີ່ລະບຸໄວ້. ໃນທາງປະຕິບັດ, ນີ້ຖືກນໍາໃຊ້ເພື່ອນໍາໃຊ້ຄໍາແນະນໍາເຄື່ອງມືເພື່ອເພີ່ມອົງປະກອບ DOM ( jQuery.on ສະຫນັບສະຫນູນ). ເບິ່ງ ນີ້ ແລະ ຕົວຢ່າງຂໍ້ມູນ . |
ແມ່ແບບ | ສາຍ | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
ພື້ນຖານ HTML ທີ່ຈະໃຊ້ໃນເວລາສ້າງຄໍາແນະນໍາເຄື່ອງມື. ຄໍາແນະນໍາຂອງເຄື່ອງມື
ອົງປະກອບ wrapper ຊັ້ນນອກທີ່ສຸດຄວນຈະມີ |
ຫົວຂໍ້ | ຊ່ອຍແນ່ | ອົງປະກອບ | ຫນ້າທີ່ | '' | ຄ່າເລີ່ມຕົ້ນຂອງຫົວຂໍ້ຖ້າ ຖ້າຟັງຊັນຖືກມອບໃຫ້, ມັນຈະຖືກເອີ້ນດ້ວຍການ |
ກະຕຸ້ນ | ສາຍ | 'ເລື່ອນໂຟກັສ' | ຄໍາແນະນໍາເຄື່ອງມືຖືກກະຕຸ້ນແນວໃດ - ຄລິກ | hover | ສຸມ | ຄູ່ມື. ທ່ານອາດຈະຜ່ານຫຼາຍ triggers; ແຍກພວກມັນດ້ວຍຊ່ອງຫວ່າງ.
|
ຊົດເຊີຍ | ເລກ | ຊ່ອຍແນ່ | ຫນ້າທີ່ | 0 | ຊົດເຊີຍຂອງຄໍາແນະນໍາເຄື່ອງມືທຽບກັບເປົ້າຫມາຍຂອງມັນ. ເມື່ອຟັງຊັນໃດນຶ່ງຖືກໃຊ້ເພື່ອກໍານົດຄ່າຊົດເຊີຍ, ມັນຖືກເອີ້ນດ້ວຍວັດຖຸທີ່ມີຂໍ້ມູນຊົດເຊີຍເປັນອາກິວເມັນທຳອິດຂອງມັນ. ຟັງຊັນຕ້ອງສົ່ງຄືນວັດຖຸທີ່ມີໂຄງສ້າງດຽວກັນ. ອົງປະກອບກະຕຸ້ນ DOM node ຖືກສົ່ງຜ່ານເປັນອາກິວເມັນທີສອງ. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານຊົດເຊີຍ ຂອງ Popper . |
ການຈັດວາງຄືນ | ຊ່ອຍແນ່ | array | 'ພິກ' | ອະນຸຍາດໃຫ້ລະບຸວ່າຕໍາແຫນ່ງ Popper ຈະນໍາໃຊ້ໃນການປ່ຽນແປງ. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານພຶດຕິກໍາ ຂອງ Popper |
customClass | ຊ່ອຍແນ່ | ຫນ້າທີ່ | '' | ເພີ່ມຫ້ອງຮຽນໃສ່ຄໍາແນະນໍາເຄື່ອງມືເມື່ອມັນຖືກສະແດງ. ຈົ່ງຈື່ໄວ້ວ່າຊັ້ນຮຽນເຫຼົ່ານີ້ຈະຖືກເພີ່ມໃສ່ນອກເໜືອໄປຈາກຊັ້ນຮຽນໃດນຶ່ງທີ່ລະບຸໄວ້ໃນແມ່ແບບ. ເພື່ອເພີ່ມຫຼາຍຊັ້ນຮຽນ, ແຍກພວກມັນດ້ວຍຍະຫວ່າງ: ທ່ານຍັງສາມາດຜ່ານຟັງຊັນທີ່ຄວນສົ່ງຄືນສະຕຣິງດຽວທີ່ມີຊື່ຊັ້ນຮຽນເພີ່ມເຕີມ. |
ເຂດແດນ | ຊ່ອຍແນ່ | ອົງປະກອບ | 'scrollParent' | overflow ຂອບເຂດຈໍາກັດຂອງຄໍາແນະນໍາເຄື່ອງມື. ຍອມຮັບຄ່າຂອງ 'viewport' , 'window' , 'scrollParent' , ຫຼືການອ້າງອີງ HTMLElement (JavaScript ເທົ່ານັ້ນ). ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ Docs PreventOverflow ຂອງ Popper . |
ອະນາໄມ | ບູລີນ | ຄວາມຈິງ | ເປີດຫຼືປິດການອະນາໄມ. ຖ້າເປີດໃຊ້ 'template' ແລະ 'title' ຕົວເລືອກຈະຖືກອະນາໄມ. ເບິ່ງ ພາກສ່ວນເຄື່ອງອະນາໄມໃນເອກະສານ JavaScript ຂອງພວກເຮົາ . |
ບັນຊີຂາວ | ວັດຖຸ | ຄ່າເລີ່ມຕົ້ນ | ວັດຖຸທີ່ມີຄຸນລັກສະນະ ແລະແທັກທີ່ອະນຸຍາດ |
ອະນາໄມFn | null | ຫນ້າທີ່ | null | ໃນທີ່ນີ້ທ່ານສາມາດສະຫນອງຫນ້າທີ່ສຸຂາພິບານຂອງທ່ານເອງ. ນີ້ສາມາດເປັນປະໂຫຍດຖ້າທ່ານຕ້ອງການໃຊ້ຫ້ອງສະຫມຸດສະເພາະເພື່ອເຮັດການອະນາໄມ. |
popperConfig | null | ວັດຖຸ | null | ເພື່ອປ່ຽນການຕັ້ງຄ່າ Popper ເລີ່ມຕົ້ນຂອງ Bootstrap, ເບິ່ງ ການຕັ້ງຄ່າຂອງ Popper |
ຄຸນລັກສະນະຂໍ້ມູນສໍາລັບຄໍາແນະນໍາເຄື່ອງມືສ່ວນບຸກຄົນ
ທາງເລືອກສໍາລັບຄໍາແນະນໍາຂອງບຸກຄົນເປັນທາງເລືອກທີ່ສາມາດໄດ້ຮັບການລະບຸໂດຍການນໍາໃຊ້ຄຸນລັກສະນະຂໍ້ມູນ, ດັ່ງທີ່ອະທິບາຍຂ້າງເທິງ.
ວິທີການ
ວິທີການ asynchronous ແລະການຫັນປ່ຽນ
ວິທີການ API ທັງໝົດແມ່ນ asynchronous ແລະເລີ່ມການ ຫັນປ່ຽນ . ພວກເຂົາກັບຄືນໄປຫາຜູ້ໂທທັນທີທີ່ການຫັນປ່ຽນເລີ່ມຕົ້ນແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດລົງ . ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .
$().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
ເລືອກ ) ບໍ່ສາມາດຖືກທໍາລາຍເປັນສ່ວນບຸກຄົນໃນອົງປະກອບ trigger ສືບທອດ.
$('#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 | ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ show ວິທີການຕົວຢ່າງຖືກເອີ້ນ. |
show.bs.tooltip | ເຫດການນີ້ຖືກຍິງອອກເມື່ອຄໍາແນະນໍາເຄື່ອງມືໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ເຫັນໄດ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ). |
hide.bs.tooltip | ເຫດການນີ້ຈະຖືກຍິງອອກທັນທີເມື່ອ hide ວິທີການຕົວຢ່າງຖືກເອີ້ນ. |
hidden.bs.tooltip | ເຫດການນີ້ຖືກໄລ່ອອກເມື່ອຄໍາແນະນໍາເຄື່ອງມືໄດ້ຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ແລ້ວ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ). |
inserted.bs.tooltip | ເຫດການນີ້ຖືກໄລ່ອອກຫຼັງຈາກ show.bs.tooltip ເຫດການເມື່ອແມ່ແບບຄໍາແນະນໍາເຄື່ອງມືໄດ້ຖືກເພີ່ມໃສ່ DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})