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

Post a reply


In an effort to prevent automatic submissions, we require that you complete the following challenge.
Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

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

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

by m038 » 01/08/2016 4:34 pm

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

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

Code: Select all

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

Code: Select all

<p>ชื่อผู้ใช้งาน : <input type="text"></p>
- จะได้ช่องกรอกข้อมูลดังภาพ
dd.png
dd.png (10.56 KiB) Viewed 530 times
3. ประกาศ script ที่จะเรียกใช้งาน tooltip โดยประกาศเป็น class และเรียกฟังก์ชันเพื่อมาใช้งานในช่อง input ในตัวอย่างจะประกาศเป็นฟังก์ชัน tooltip()
เรียกใช้จะเรียกใช้ data-toggle="tooltip"

Code: Select all

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


4. เรียกใช้งาน data-toggle="tooltip" แล้วกำหนด title ที่จะแสดงตามต้องการ เช่น กรอกชื่อผู้ใช้งาน

Code: Select all

<div class="container"><br>
    <p>ชื่อผู้ใช้งาน : 
          <input type="text" data-toggle="tooltip" data-placement="ชื่อผู้ใช้" title="กรอกชื่อผู้ใช้งาน">
     </p>
</div>

- เมื่อนำมามาชี้ที่ช่องกรอกข้อความจะแสดงผลดังภาพ
ee.png
ee.png (11.39 KiB) Viewed 530 times

Top