ຄຳແນະນຳ

ພາບລວມ

ສິ່ງທີ່ຄວນຮູ້ໃນເວລາໃຊ້ 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.

ໄດ້ທັງໝົດບໍ? ດີຫຼາຍ, ໃຫ້ເບິ່ງວ່າພວກເຂົາເຮັດວຽກແນວໃດກັບບາງຕົວຢ່າງ.

ຕົວຢ່າງ: ເປີດໃຊ້ຄໍາແນະນໍາເຄື່ອງມືຢູ່ທົ່ວທຸກແຫ່ງ

ວິທີໜຶ່ງເພື່ອເລີ່ມຕົ້ນຄຳແນະນຳເຄື່ອງມືທັງໝົດໃນໜ້າໃດໜຶ່ງຈະເປັນການເລືອກພວກມັນຕາມ data-bs-toggleຄຸນລັກສະນະຂອງພວກມັນ:

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

ຕົວຢ່າງ

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

ເລື່ອນໃສ່ປຸ່ມຕ່າງໆຂ້າງລຸ່ມນີ້ເພື່ອເບິ່ງສີ່ທິດທາງຄໍາແນະນໍາ: ເທິງ, ຂວາ, ລຸ່ມ, ແລະຊ້າຍ. ທິດທາງແມ່ນສະທ້ອນເມື່ອໃຊ້ 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)

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

ການນໍາໃຊ້ຟັງຊັນທີ່ມີ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()

ຖິ້ມ

ເຊື່ອງ ແລະທຳລາຍຄຳແນະນຳຂອງອົງປະກອບໃດໜຶ່ງ (ລຶບຂໍ້ມູນທີ່ເກັບໄວ້ໃນອົງປະກອບ 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

ເຫດການ

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()