Tooltip คืออะไร???
การแสดงป้อปอัพ หรือ alert มีมากมายหลายรูปแบบ เราสร้างเองใช้ plugin ที่มีคนสร้างไว้แล้ว หรือใช้ของค่าเริ่มต้นที่เบราเซอร์ให้มาก็ได้ และ tooltip ก็เป็น alert รูปแบบหนึ่งที่มาพร้อม bootstrap ซึ่งเป็นกล่องป๊อปอัพขนาดเล็กที่ปรากฏขึ้นเมื่อผู้ใช้เลื่อนตัวชี้เมาส์ไปที่ตำแหน่งที่กำหนด
ตัวอย่างภาพ วิธีการใช้งานไม่ยาก เพราะเป็น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>
และส่วนของ javascript สามารถเขียนตามนี้
โค้ด: เลือกทั้งหมด
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
นี่ก็เป็นส่วนหนึ่งที่เป็นลูกเล่นของbootstrap หวังว่าจะเป็นประโยชน์น่ะครับ
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Bootstrap
-ศึกษาความรู้เกี่ยวกั ฺ Bootstrap
-บทเรียน HTML
-ศึกษาความรู้เกี่ยวกั ฺCSS
-ถามตอบเกี่ยวกับ PHP
-ศึกษาความรู้เกี่ยวกับ PHP