การใช้งาน bootstrap Tooltip

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 362
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

การใช้งาน bootstrap Tooltip

โพสต์โดย abdkode » 17/01/2019 7:10 pm

ิิในbootstrap ยังมีลูกเล่นอีกมากมายให้เราได้ลองใช้ เช่น เรื่อง tooltip ซึ่งเป็นเรื่องที่เราจะอ่านในวันนี้
Tooltip คืออะไร???
การแสดงป้อปอัพ หรือ alert มีมากมายหลายรูปแบบ เราสร้างเองใช้ plugin ที่มีคนสร้างไว้แล้ว หรือใช้ของค่าเริ่มต้นที่เบราเซอร์ให้มาก็ได้ และ tooltip ก็เป็น alert รูปแบบหนึ่งที่มาพร้อม bootstrap ซึ่งเป็นกล่องป๊อปอัพขนาดเล็กที่ปรากฏขึ้นเมื่อผู้ใช้เลื่อนตัวชี้เมาส์ไปที่ตำแหน่งที่กำหนด
ตัวอย่างภาพ
tooltip.png
tooltip.png (4.83 KiB) เปิดดู 1261 ครั้ง


วิธีการใช้งานไม่ยาก เพราะเป็นbootstrap เตรียมทุกอย่างให้เรา เพียงแค่ใช้โค้ดให้ถูกต้องตามเงื่อนไขที่เขากำหนด
ดังตัวอย่างนี้

โค้ด: เลือกทั้งหมด

<h3>Tooltip Example</h3>
  <p>Tooltips are not CSS-only plugins, and must therefore be initialized with jQuery:
   select the specified element and call the tooltip() method.</p>
  <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>


ส่วนที่สำคัญที่เราขาดไม่ได้คือส่วนนี้

โค้ด: เลือกทั้งหมด

 <a href="#" data-toggle="tooltip" title="ข้อความที่จะแสดง">Hover over me</a>


จะเห็นว่าตรง attribut title จะมีให้เรากำหนดข้อความที่เราต้องการแสดง
และส่วนของ javascript สามารถเขียนตามนี้

โค้ด: เลือกทั้งหมด

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>

ในการกำหนด selector ต้องให้ตรงกันกับที่กำหนด เช่น [data-toggle="tooltip"]
นี่ก็เป็นส่วนหนึ่งที่เป็นลูกเล่นของbootstrap หวังว่าจะเป็นประโยชน์น่ะครับ

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Bootstrap
-ศึกษาความรู้เกี่ยวกั ฺ Bootstrap
-บทเรียน HTML
-ศึกษาความรู้เกี่ยวกั ฺCSS
-ถามตอบเกี่ยวกับ PHP
-ศึกษาความรู้เกี่ยวกับ PHP

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 7 และ บุคคลทั่วไป 0 ท่าน