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

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

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

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

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

โพสต์โดย m038 » 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
dd.png (10.56 KiB) เปิดดู 94 ครั้ง


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) เปิดดู 94 ครั้ง

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 5 และ บุคคลทั่วไป 0 ท่าน