CSS Tooltip Generator: สร้าง Tooltip ล้วน CSS โดยไม่ต้องใช้ JavaScript

Tooltip เป็นองค์ประกอบที่เงียบ ๆ แต่ทำงานหนักที่สุดชิ้นหนึ่งของ UI มันอธิบายปุ่มที่มีแค่ไอคอน ขยายความคำย่อ และเฉลยคำใบ้ในจังหวะที่ผู้ใช้ต้องการพอดี โดยไม่ต้องเติมป้ายข้อความถาวรให้หน้าจอรก ปัญหาคือหลายเว็บเลือกใช้ไลบรารี JavaScript ตัวใหญ่เพื่อทำ tooltip ทั้งที่แลกมาด้วยน้ำหนัก bundle ที่โตขึ้นและ accessibility ที่พังง่าย CSS Tooltip Generator เลือกทางที่เบากว่า คุณตั้งค่า tooltip ผ่านหน้าจอ ดูผลใน live preview แล้ว copy โค้ด HTML กับ CSS ที่สะอาด ซึ่งทำงานได้โดยไม่ต้องมี JavaScript เลยแม้แต่บรรทัดเดียว

เพราะผลลัพธ์เป็น CSS ล้วน tooltip จะโหลดทันที สืบทอดฟอนต์ของเว็บคุณเอง และยังทำงานได้แม้สคริปต์ล้มเหลวหรือถูกบล็อก คุณเลือกตำแหน่ง เปิดปิด arrow เลือกสีพื้นและสีตัวอักษร แล้วกำหนดว่า trigger แบบไหนจะทำให้มันแสดง คือ hover สำหรับผู้ใช้เมาส์ และ focus สำหรับผู้ใช้คีย์บอร์ด

คู่มือนี้จะพาดูว่าเครื่องมือทำอะไรได้บ้าง รูปแบบ hover และ focus trigger ทำงานอย่างไรภายใต้ฮู้ด กับดักเรื่อง overflow ที่ตัด tooltip ให้หายไป และแนวปฏิบัติที่ทำให้ tooltip ใช้งานได้จริงบนทุกอุปกรณ์

ทำไมต้องใช้ CSS Tooltip Generator?

• ไม่ต้องพึ่ง JavaScript เลย tooltip ที่ได้ใช้แค่ HTML กับ CSS ไม่มีอะไรต้องติดตั้ง ไม่มีไลบรารีต้องอัปเดต และไม่มีสคริปต์มาขวางการเรนเดอร์
• เห็นผลแบบเรียลไทม์ ทุกครั้งที่ปรับตำแหน่ง arrow สี หรือ trigger live preview จะอัปเดตทันที ไม่ต้องก็อปโค้ดไปลองมั่วเพื่อค้นว่าหน้าตาเป็นอย่างไร
• โค้ด HTML และ CSS พร้อมวาง เครื่องมือสร้าง HTML snippet กระชับ พร้อมบล็อก CSS ที่เข้าคู่กัน วางลงโปรเจกต์ไหนก็ได้ จะใช้ framework หรือไม่ก็ตาม
• ครบทั้ง 4 ตำแหน่งพร้อม arrow จริง วางได้ทั้ง top, right, bottom และ left โดยแต่ละตำแหน่งมี arrow ชี้ถูกฝั่งและกลมกลืนกับสีของ bubble เสมอ
• เข้าถึงได้ด้วยคีย์บอร์ดตั้งแต่ต้น เปิด trigger แบบ focus แล้ว ผู้ใช้ที่กด Tab ไปที่ trigger จะเห็น tooltip เดียวกับที่ผู้ใช้เมาส์เห็นตอน hover
• ทำงานฝั่ง client 100% และฟรี ทุกการตั้งค่าเกิดขึ้นในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดข้อมูล และไม่ต้องสมัครบัญชี

ฟีเจอร์หลัก

• HTML เก็บข้อความ tooltip ไว้ใน data-tip attribute แก้ข้อความได้โดยไม่ต้องแตะ stylesheet เลย
• CSS แยกเรื่องรูปลักษณ์ออกจากการมองเห็น ทำให้ปรับ transition เพิ่มภายหลังได้ง่าย
• ทุกอย่างทำงานฝั่ง client ทดลองเท่าไรก็ได้ ไม่มีข้อมูลออกไปไหนทั้งสิ้น

วิธีใช้งาน

1. เปิดเครื่องมือแล้วเลือกตำแหน่ง เข้า CSS Tooltip Generator แล้วเลือก top, right, bottom หรือ left ค่าเริ่มต้นยอดนิยมคือ top แต่ถ้า trigger อยู่ใกล้ขอบบนของจอ ให้พลิกเป็น bottom แทน
2. เปิด arrow และปรับระยะห่าง เปิด arrow เมื่อต้องการให้ bubble ชี้ไปที่ trigger ชัดเจน แล้วปรับ offset ให้ทั้งสองส่วนดูเชื่อมกันเป็นชิ้นเดียว
3. ตั้งค่าสี เลือกคู่สีพื้นกับสีตัวอักษรที่ contrast สูงพอ แล้วยืนยันผลใน live preview ก่อนไปต่อ
4. เปิด trigger ทั้งสองแบบ เลือก hover และ focus พร้อมกัน hover ดูแลผู้ใช้เมาส์ ส่วน focus ทำให้การกด Tab ไปถึง trigger ก็เห็น tooltip เดียวกัน
5. ก๊อปปี้โค้ดไปวางในโปรเจกต์ วาง HTML กับ CSS เปลี่ยนชื่อ class ตามแบบแผนของคุณ แล้วใส่ข้อความจริงแทนตัวอย่าง เท่านี้การติดตั้งก็จบแล้ว

Tooltip แบบไม่ใช้ JavaScript ทำงานอย่างไร

รูปแบบ hover และ focus trigger tooltip ล้วน CSS คือ bubble ที่ถูกซ่อนไว้ แล้วปรากฏขึ้นเมื่อ trigger ตรงกับ pseudo-class ที่กำหนด โค้ดที่เครื่องมือสร้างให้จับคู่สองแบบนี้ไว้ชัดเจน:

.tooltip:hover .tooltip-bubble,
.tooltip:focus .tooltip-bubble {
  opacity: 1;
  visibility: visible;
}

กฎ :hover รองรับผู้ใช้เมาส์ ส่วน :focus คือสิ่งที่ทำให้ทั้งรูปแบบนี้เข้าถึงได้ด้วยคีย์บอร์ด เพื่อให้ :focus ทำงาน trigger ต้องรับ focus ได้ ปุ่มหรือลิงก์จริงรับได้อยู่แล้ว และโค้ดที่สร้างให้จะเติม tabindex="0" ให้เมื่อ trigger เป็น span ธรรมดา ถ้าผูก bubble เข้ากับ aria-describedby ด้วย screen reader จะอ่านข้อความใน tooltip ให้ผู้ใช้ได้อีกชั้นหนึ่ง

การสร้าง arrow: เทคนิค border และสี่เหลี่ยมหมุน มีสองวิธีคลาสสิกในการทำ arrow ด้วย CSS วิธีแรกคือ border trick ใช้ element ขนาดศูนย์ที่มี border สามด้านโปร่งใสและหนึ่งด้านมีสี ประกอบกลายเป็นสามเหลี่ยม อีกวิธีคือ rotated-square trick วางสี่เหลี่ยมเล็กหมุน 45 องศา ซ้อนครึ่งหนึ่งไว้ใต้ bubble เครื่องมือนี้เลือก rotated square เพราะเข้าสีกับ bubble ได้เป๊ะและไม่ต้องคำนวณ border-width ให้ปวดหัว

ตำแหน่งและกับดัก overflow bubble ถูกวางแบบ absolute เทียบกับ trigger พ่อแม่ที่มี overflow: hidden จึงตัดมันทิ้งอย่างเงียบ ๆ นี่คือรายงานยอดฮิตที่สุดว่า tooltip หายไปไหน และมักย้อนกลับไปเจอ card, table wrapper หรือ carousel ที่ตั้ง overflow ไว้ วิธีแก้เรียงตามลำดับคือ ย้าย tooltip ออกนอก container ที่ตัด เอา overflow: hidden ออกในจุดที่ไม่จำเป็นจริง หรือพลิก bubble ไปฝั่งที่มีที่ว่าง ซึ่งวิธีสุดท้ายแก้ปัญหา tooltip โดนขอบจอตัดไปด้วยในตัว

อุปกรณ์สัมผัสไม่มี hover บนมือถือและแท็บเล็ตไม่มีเมาส์ให้ hover ดังนั้น tooltip ที่มีแค่ hover แทบมองไม่เห็นเลย และการแตะ element ที่รับ focus ไม่ได้ก็ทำให้ hover ทำงานไม่เสถียร การจับคู่ hover กับ focus แก้ปัญหานี้ได้ เมื่อ trigger เป็นปุ่มจริง การแตะจะส่ง focus ให้และเผย tooltip ออกมา ส่วนคำใบ้ที่จำเป็นต่อการใช้งานบนจอสัมผัส ควรแสดงถาวรแทนการซ่อนไว้หลัง interaction

เรื่อง timing และ pointer-events transition ราว 150 มิลลิวินาทีทำให้ bubble รู้สึกตอบสนองไวไม่ล่าช้า การใส่ transition-delay เล็กน้อยตอนซ่อนช่วยให้เมาส์ข้ามช่องว่างสักไม่กี่พิกเซลระหว่าง trigger กับ bubble ได้โดยไม่หายวับ และโค้ดที่สร้างให้ตั้ง pointer-events: none ไว้ที่ bubble เพื่อไม่ให้เมาส์ไปลงที่ tooltip เองจนผู้ใช้ติดอยู่ใน loop กะพริบไปมา

กรณีการใช้งานจริง

ปุ่มที่มีแค่ไอคอน

ไอคอนถังขยะ เฟืองตั้งค่า หรือลูกศรแชร์ ช่วยประหยัดพื้นที่แต่กลับซ่อนความหมายเอาไว้ tooltip กลับมาเติมป้ายชื่อให้ตอน hover และ focus โดยไม่ต้องเสียพื้นที่เลย์เอาต์ถาวรไปกับข้อความ

คำใบ้ของฟิลด์ในฟอร์ม

กฎของรหัสผ่าน รูปแบบวันที่ หรือเหตุผลที่ฟิลด์จำเป็น ล้วนเข้ากันดีกับ tooltip ที่แปะอยู่กับไอคอนช่วยเหลือเล็ก ๆ การใช้ focus เป็น trigger ได้ผลที่สุดในจุดนี้ เพราะผู้ใช้ที่กด Tab เข้าฟิลด์จะเห็นเงื่อนไขทันที

คำย่อในตาราง

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

ตัวบ่งชี้สถานะ

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

แนวทางปฏิบัติที่ดีที่สุด

• อย่าใส่ข้อมูลวิกัติขัดไว้ใน tooltip เพียงอย่างเดียว คำเตือน ราคา และคำอธิบาย error ต้องมองเห็นได้โดยไม่ต้องทำอะไร tooltip เป็นส่วนเสริม ไม่ใช่ที่เก็บเนื้อหาที่ต้องอ่าน
• เขียนข้อความให้สั้น หนึ่งประโยคกำลังดี tooltip ไว้อ่านแวบเดียว bubble ยาวจะล้นทั้งหน้าจอและความอดทนของผู้อ่าน
• จับคู่ hover กับ focus เสมอ แลกมาด้วย selector เพิ่มหนึ่งบรรทัด แต่ทำให้ข้อมูลชุดเดียวกันถึงมือผู้ใช้คีย์บอร์ดด้วย
• เช็ก contrast ทั้งสองชั้น ทั้ง bubble เทียบกับพื้นหลังหน้า และตัวอักษรเทียบกับ bubble ต้อง contrast พอ
• ระวังบรรพบุรุษที่เป็น overflow:hidden ทดสอบ tooltip ใน card, table และ modal ซึ่งเป็นที่ซ่อนของบั๊กการตัด
• ทดสอบด้วยคีย์บอร์ดและมือถือ กด Tab ไล่ทั้งหน้า แล้วแตะ trigger บนเครื่องจริงก่อนปล่อยของทุกครั้ง

ลอง CSS Tooltip Generator เลย

เปิด CSS Tooltip Generator เลือกตำแหน่ง ตั้งสี แล้ว copy โค้ด HTML กับ CSS ระดับผลิตจริงไปใช้ได้ภายในไม่ถึงนาที ไม่ต้องสมัคร ไม่มี dependency ไม่มี JavaScript ได้แค่ tooltip ที่ทำงานได้ทั้งกับเมาส์ คีย์บอร์ด และทุกอย่างระหว่างนั้น

เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:

• CSS Animation Generator — สร้าง keyframe animation แบบเห็นภาพและ copy CSS พร้อมใช้ เข้าคู่กับ tooltip ได้พอดีสำหรับจังหวะการปรากฏ
• CSS Spinner Generator — ทำ loading spinner ล้วน CSS สำหรับช่วงเวลาที่ tooltip ยังไม่ใช่ feedback ที่พอ
• CSS Unit Converter — แปลง px, rem, em และอื่น ๆ เวลาปรับขนาด tooltip ให้เข้ากับ type scale ของคุณ

ขอให้สนุกกับการจัดสไตล์

คำถามที่พบบ่อย

ถ: tooltip ที่ได้มาจริง ๆ ไม่ต้องใช้ JavaScript เลยใช่ไหม?

ตอบ: ใช่ การมองเห็นขับเคลื่อนด้วย pseudo-class hover และ focus ของ CSS ล้วน ๆ JavaScript จะจำเป็นเฉพาะพฤติกรรมขั้นสูงอย่างการจัดตำแหน่งใหม่ตอน scroll เท่านั้น

ถ: ทำไม tooltip ถึงโดนตัดหรือมองไม่เห็นตอนขึ้น production?

ตอบ: เกือบทุกกรณีมี element บรรพบุรุษที่ตั้ง overflow: hidden คอยตัด bubble ที่วางแบบ absolute ทิ้ง ให้ย้าย tooltip ออกนอก container ที่ตัด เอา hidden overflow ออก หรือพลิก bubble ไปอีกฝั่ง

ถ: ผู้ใช้คีย์บอร์ดมองเห็น tooltip ได้อย่างไร?

ตอบ: CSS ที่สร้างให้จับคู่ :hover กับ :focus และ HTML ทำให้ trigger รับ focus ได้ การกด Tab ไปถึง trigger จะแสดง bubble เดียวกับที่ผู้ใช้เมาส์เห็น และ screen reader อ่านข้อความได้ผ่าน aria-describedby ที่แนบมาด้วย

ถ: tooltip เหล่านี้ใช้ได้บนหน้าจอสัมผัสไหม?

ตอบ: ได้บางส่วน จอสัมผัสไม่มี hover แต่ถ้า trigger เป็นปุ่มหรือลิงก์จริง การแตะจะได้ focus มาและเผย tooltip ออกมา สำหรับคำใบ้ที่จำเป็น ควรแสดงข้อความถาวรบนจอเล็กแทน