เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

โพสต์แล้ว: **01/08/2016 4:34 pm**

สร้างกล่องข้อความตัวช่วยเหลือแบบสั้นๆ Tooltip

1. การสร้างกล่องข้อความตัวช่วยเหลือแบบสั้นๆ Tooltip แบบง่ายๆ โดยการประกาศ container ในการจัดการข้อมูลให้อยู่ภายใน container

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

<div class="container">...... ใส่ code ที่เราต้องการ ......</div>

2. ประกาศช่อง input ข้อมูลแบบง่ายๆ

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

<p>ชื่อผู้ใช้งาน : <input type="text"></p>

- จะได้ช่องกรอกข้อมูลดังภาพ

: dd.png (10.56 KiB) Viewed 1267 times

3. ประกาศ script ที่จะเรียกใช้งาน tooltip โดยประกาศเป็น class และเรียกฟังก์ชันเพื่อมาใช้งานในช่อง input ในตัวอย่างจะประกาศเป็นฟังก์ชัน tooltip()
เรียกใช้จะเรียกใช้ 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>

- เมื่อนำมามาชี้ที่ช่องกรอกข้อความจะแสดงผลดังภาพ

: ee.png (11.39 KiB) Viewed 1267 times