หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

คำแนะนำเครื่องมือ CSS ที่เรียบง่ายสุด ๆ

เพิ่มคำแนะนำเครื่องมือไปยังองค์ประกอบได้อย่างง่ายดาย คำแนะนำเครื่องมือสามารถวางอยู่ทางด้านซ้ายขวาหรือด้านล่างขององค์ประกอบ ตัวเลือกด้านล่างที่สองรวมถึงตัวชี้

ภาพคำแนะนำเครื่องมือ

คลาส CSS

  • tooltip--left
  • tooltip--right
  • tooltip--bottom
  • tooltip--triangle

การใช้งาน

CSS ใช้องค์ประกอบใด ๆ ที่มี tooltip--* คลาสและใช้แอตทริบิวต์ data-tooltip บนองค์ประกอบเพื่อให้ข้อความคำแนะนำเครื่องมือ 

[ class ^= "tooltip" ] {
  ...
  content : attr ( data-tooltip );
  ...
}
 < img href =" /img/info.svg " class =" tooltip--left " data-tooltip =" This is the text displayed " >

สนับสนุน

รุ่นปัจจุบันของ Chrome, Firefox, Safari, Edge และ IE10+

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด