1. การสร้างกล่องข้อความตัวช่วยเหลือแบบสั้นๆ Tooltip แบบง่ายๆ โดยการประกาศ container ในการจัดการข้อมูลให้อยู่ภายใน container
โค้ด: เลือกทั้งหมด
<div class="container">...... ใส่ code ที่เราต้องการ ......</div>
โค้ด: เลือกทั้งหมด
<p>ชื่อผู้ใช้งาน : <input type="text"></p>
เรียกใช้จะเรียกใช้ data-toggle="tooltip"
โค้ด: เลือกทั้งหมด
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
4. เรียกใช้งาน data-toggle="tooltip" แล้วกำหนด title ที่จะแสดงตามต้องการ เช่น กรอกชื่อผู้ใช้งาน
โค้ด: เลือกทั้งหมด
<div class="container"><br>
<p>ชื่อผู้ใช้งาน :
<input type="text" data-toggle="tooltip" data-placement="ชื่อผู้ใช้" title="กรอกชื่อผู้ใช้งาน">
</p>
</div>
- เมื่อนำมามาชี้ที่ช่องกรอกข้อความจะแสดงผลดังภาพ