เมาส์ชี้ แล้วขึ้นข้อความ HTML สวยๆ ด้วย Bootstrap Tooltip

เมาส์ชี้ แล้วขึ้นข้อความ HTML สวยๆ ด้วย Bootstrap Tooltip บทความนี้สอนใช้ Tooltip ของ Bootstrap Framework เพื่อสร้างโค้ดเวลาผู้ใช้งานนำเมาส์ชี้ที่รูป ข้อความ หรือวัตถุ แล้วขึ้นข้อความ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง เมาส์ชี้ แล้วขึ้นข้อความ HTML สวยๆ ด้วย Bootstrap Tooltip

1. ติดตั้ง Bootstrap และ jQuery ผ่านบริการ CDN

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>

2. เปิดใช้งาน Tooltip กับทุก elements ที่ใช้คำสั่ง data-toggle="tooltip"

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

3. ทดสอบ Tooltip เมาส์ชี้ แล้วขึ้นข้อความ

<a href="readmore.html" data-toggle="tooltip" data-placement="top" title="คลิกเพื่ออ่านรายละเอียดต่อ">อ่านต่อ</a>

เมาส์ชี้ แล้วขึ้นข้อความ HTML จากโค้ดข้อ 3 เป็นการเรียกใช้ Tooltip ของ Bootstrap Framework ผ่านแท็ก a ของ HTML มีคำสั่งที่สำคัญดังนี้

1. data-toggle="tooltip" คือ คำสั่งเรียกใช้ Tooltip โดยอ้างอิงจากการเปิดใช้งานจากตัวอย่างของข้อ 2

2. data-placement="top" คือ กำหนดให้ข้อความ Tooltip อยู่ทางด้านบน โดยค่านี้ปรับแต่งได้ 4 ตำแหน่งคือ top, left, bottom และ right

3. title คือ กำหนดข้อความที่ต้องการแสดงเมื่อถูกเมาส์ชี้