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

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

m038
PHP Sr. Member
PHP Sr. Member
โพสต์: 59
ลงทะเบียนเมื่อ: 29/07/2016 10:40 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย m038 »

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

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

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

<div class="container">...... ใส่ code ที่เราต้องการ ......</div>
2. ประกาศช่อง input ข้อมูลแบบง่ายๆ

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

<p>ชื่อผู้ใช้งาน : <input type="text"></p>
- จะได้ช่องกรอกข้อมูลดังภาพ
dd.png
dd.png (10.56 KiB) Viewed 1218 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
ee.png (11.39 KiB) Viewed 1218 times
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 64