การใช้งาน bootstrap Tooltip

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ
BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด
กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: การใช้งาน bootstrap Tooltip

การใช้งาน bootstrap Tooltip

โดย abdkode » 17/01/2019 7:10 pm

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

ข้างบน