Source

ຄຳແນະນຳ

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

ພາບລວມ

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

  • ຄໍາແນະນໍາເຄື່ອງມືແມ່ນອີງໃສ່ຫ້ອງສະຫມຸດພາກສ່ວນທີສາມ Popper.js ສໍາລັບການຈັດຕໍາແຫນ່ງ. ທ່ານຕ້ອງປະກອບ popper.min.js ກ່ອນ bootstrap.js ຫຼືໃຊ້ bootstrap.bundle.min.js/ bootstrap.bundle.jsທີ່ມີ Popper.js ເພື່ອໃຫ້ຄໍາແນະນໍາເຄື່ອງມືເຮັດວຽກ!
  • ຖ້າທ່ານກໍາລັງສ້າງ 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()
})

ຕົວຢ່າງ

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

ກາງເກງແຫນ້ນລະດັບຕໍ່ໄປ keffiyeh ເຈົ້າອາດຈະ ບໍ່ໄດ້ຍິນກ່ຽວກັບພວກມັນ. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit American apparel ມີ terry richardson vinyl chambray. ໜວດ ມ່າຍ ເຕີ໋ຍ, ກ໊ອງ ບົ໋ວ ມ່າຍ ຢຽດ ເຕົ້າ. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. ຊ່າງຫັດຖະກໍາທີ່ ມີທາດເຫຼັກແທ້ໆອັນ ໃດກໍໄດ້ keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim viral ກາເຟຕົ້ນກໍາເນີດ.

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

<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 ຈືດໆໄປຫາຄຳແນະນຳ
ບັນຈຸ ຊ່ອຍແນ່ | ອົງປະກອບ | ບໍ່ຖືກຕ້ອງ ບໍ່ຖືກຕ້ອງ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

'hover'ຂອງມັນເອງຈະສົ່ງຜົນໃຫ້ຄໍາແນະນໍາເຄື່ອງມືທີ່ບໍ່ສາມາດຖືກກະຕຸ້ນຜ່ານແປ້ນພິມໄດ້, ແລະຄວນຈະຖືກນໍາໃຊ້ພຽງແຕ່ຖ້າວິທີການທາງເລືອກໃນການຖ່າຍທອດຂໍ້ມູນດຽວກັນສໍາລັບຜູ້ໃຊ້ແປ້ນພິມ.
ຊົດເຊີຍ ເລກ | ຊ່ອຍແນ່ | ຫນ້າທີ່ 0

ຊົດເຊີຍຂອງຄໍາແນະນໍາເຄື່ອງມືທຽບກັບເປົ້າຫມາຍຂອງມັນ.

ເມື່ອຟັງຊັນໃດນຶ່ງຖືກໃຊ້ເພື່ອກໍານົດຄ່າຊົດເຊີຍ, ມັນຖືກເອີ້ນດ້ວຍວັດຖຸທີ່ມີຂໍ້ມູນຊົດເຊີຍເປັນອາກິວເມັນທຳອິດຂອງມັນ. ຟັງຊັນຕ້ອງສົ່ງຄືນວັດຖຸທີ່ມີໂຄງສ້າງດຽວກັນ. ອົງປະກອບກະຕຸ້ນ DOM node ຖືກສົ່ງຜ່ານເປັນອາກິວເມັນທີສອງ.

ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານຊົດເຊີຍ ຂອງ Popper.js .
ການຈັດ​ວາງ​ຄືນ ຊ່ອຍແນ່ | array 'ພິກ' ອະ​ນຸ​ຍາດ​ໃຫ້​ລະ​ບຸ​ວ່າ​ຕໍາ​ແຫນ່ງ Popper ຈະ​ນໍາ​ໃຊ້​ໃນ​ການ​ປ່ຽນ​ແປງ​. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານພຶດຕິກໍາ ຂອງ Popper.js
ເຂດແດນ ຊ່ອຍແນ່ | ອົງປະກອບ 'scrollParent' overflow ຂອບເຂດຈໍາກັດຂອງຄໍາແນະນໍາເຄື່ອງມື. ຍອມຮັບຄ່າຂອງ 'viewport', 'window', 'scrollParent', ຫຼືການອ້າງອີງ HTMLElement (JavaScript ເທົ່ານັ້ນ). ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງທີ່ Docs PreventOverflow ຂອງ Popper.js .
ອະນາໄມ ບູລີນ ຄວາມຈິງ ເປີດຫຼືປິດການອະນາໄມ. ຖ້າເປີດໃຊ້ 'template'ແລະ 'title'ຕົວເລືອກຈະຖືກອະນາໄມ.
ບັນຊີຂາວ ວັດຖຸ ຄ່າເລີ່ມຕົ້ນ ວັດຖຸທີ່ມີຄຸນລັກສະນະ ແລະແທັກທີ່ອະນຸຍາດ
ອະນາໄມFn null | ຫນ້າທີ່ null ໃນທີ່ນີ້ທ່ານສາມາດສະຫນອງຫນ້າທີ່ສຸຂາພິບານຂອງທ່ານເອງ. ນີ້ສາມາດເປັນປະໂຫຍດຖ້າທ່ານຕ້ອງການໃຊ້ຫ້ອງສະຫມຸດສະເພາະເພື່ອເຮັດການອະນາໄມ.
popperConfig null | ວັດຖຸ null ເພື່ອປ່ຽນການຕັ້ງຄ່າ Popper.js ເລີ່ມຕົ້ນຂອງ Bootstrap, ເບິ່ງ ການຕັ້ງຄ່າຂອງ Popper.js

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

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

ວິທີການ

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

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

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

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