Softonic

เครื่องมือสร้างทูลทิป CSS

ขั้นตอน 1 / 2
ถัดไป

ทูลทิปมักเป็นสิ่งแรกที่โปรเจกต์นึกถึงเมื่อจะดึงไลบรารี JavaScript เข้ามาใช้ แต่จริง ๆ แล้วซูโดเอลิเมนต์ ::after ธรรมดาที่ควบคุมด้วยแอตทริบิวต์ data-tooltip ก็ครอบคลุมกรณีใช้งานจริงได้ถึง 90% เครื่องมือนี้จะสร้างกฎ .tooltip และ .tooltip::after ที่คุณต้องการออกมาให้ตรง ๆ เพียงเลือกตำแหน่งบน ล่าง ซ้าย หรือขวา ปรับสีพื้นหลังและสีข้อความ แล้วคัดลอกบล็อกที่ได้ไปวางในสไตล์ชีตของคุณ

วิธีเชื่อมทูลทิปเข้ากับ HTML ของคุณ

  1. 1

    เลือกตำแหน่ง

    บน ล่าง ซ้าย หรือขวา เครื่องมือใช้ `calc(100% + 8px)` ร่วมกับ transform ที่เหมาะสม เพื่อให้กล่องคำอธิบายอยู่ชิดกับองค์ประกอบที่เป็นตัวกระตุ้นพอดี

  2. 2

    เลือกสี

    สีพื้นหลังใช้กับกล่องคำอธิบาย ส่วนสีข้อความใช้กับป้ายกำกับของทูลทิป เพื่อให้อ่านง่าย ควรรักษาอัตราส่วนความต่างของสีไว้ที่ 4.5:1 ขึ้นไป

  3. 3

    คัดลอก CSS

    วางบล็อกที่สร้างขึ้นลงในสไตล์ชีตของคุณ ซึ่งจะมีกฎ `.tooltip`, `.tooltip::after` และ `:hover` ให้พร้อมใช้งาน

  4. 4

    ใส่มาร์กอัปให้กับตัวกระตุ้น

    เพิ่ม `class="tooltip" data-tooltip="ข้อความที่ต้องการแสดง"` ลงในองค์ประกอบใดก็ได้ โดย `::after` จะอ่านค่าแอตทริบิวต์นี้ผ่าน `content: attr(data-tooltip)`

ทูลทิปแบบ CSS ล้วน: สิ่งที่คุณได้และสิ่งที่คุณต้องแลกไป

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

CSS ที่สร้างขึ้นทำอะไรบ้าง

  • ตั้งค่าตัวกระตุ้นเป็น position: relative เพื่อให้ทูลทิปที่วางตำแหน่งแบบสัมบูรณ์ยึดติดกับมัน
  • ดึงป้ายกำกับมาจาก content: attr(data-tooltip) ซึ่งหมายความว่าคุณไม่ต้องเขียนข้อความซ้ำ
  • ทำแอนิเมชันความทึบแสงด้วย transition: opacity 0.15s เพื่อให้การปรากฏขึ้นรวดเร็วแต่ไม่กระโชกกระชาก
  • ใช้ pointer-events: none บนกล่องคำอธิบาย เพื่อไม่ให้มันขวางการคลิกบนตัวกระตุ้น

การคำนวณตำแหน่ง

ตำแหน่ง กฎการเลื่อน
บน bottom: calc(100% + 8px); left: 50%; translateX(-50%)
ล่าง top: calc(100% + 8px); left: 50%; translateX(-50%)
ซ้าย right: calc(100% + 8px); top: 50%; translateY(-50%)
ขวา left: calc(100% + 8px); top: 50%; translateY(-50%)

ข้อควรระวังด้านการเข้าถึง

  • โปรแกรมอ่านหน้าจอจะไม่อ่าน data-tooltip หากข้อมูลนั้นสำคัญ ควรใช้ควบคู่กับ aria-label หรือข้อความที่มองเห็นได้
  • ผู้ใช้แป้นพิมพ์ต้องการทั้ง :focus-visible และ :hover ให้ขยายกฎที่สร้างขึ้นเป็น .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }
  • ทูลทิปที่ถูกตัดด้วย overflow: hidden บนองค์ประกอบบรรพบุรุษจะหายไป ให้ย้ายตัวกระตุ้นออกจากคอนเทนเนอร์ที่ตัดขอบ หรือเปลี่ยนไปใช้ป็อปโอเวอร์ที่เรนเดอร์ด้วย JavaScript สำหรับส่วนติดต่อผู้ใช้ที่มีองค์ประกอบหนาแน่น

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

ซูโดเอลิเมนต์ช่วยให้ DOM สะอาด หลีกเลี่ยงการเขียนข้อความป้ายกำกับซ้ำ และให้คุณจัดสไตล์ทูลทิปได้โดยไม่ต้องกังวลว่าจะไปตรงกับองค์ประกอบอื่นโดยบังเอิญ ข้อแลกเปลี่ยนคือเนื้อหาของ ::after ไม่สามารถถูกจัดทำดัชนีโดยเทคโนโลยีช่วยเหลือได้ ดังนั้นควรเสริมข้อความสำคัญด้วย aria-label

ได้, เพิ่มซูโดเอลิเมนต์ตัวที่สอง เช่น .tooltip::before โดยขึ้นรูปเป็นกล่องที่มีความกว้างและความสูงเป็นศูนย์พร้อมเส้นขอบที่ลงสี นี่เป็นเทคนิคสร้างรูปสามเหลี่ยมด้วย CSS แบบคลาสสิก ส่วนเครื่องมือ CSS Triangle Generator ในชุดนี้จะสร้างการประกาศเส้นขอบที่คุณต้องการได้อย่างแม่นยำ

เพิ่ม transition-delay: 0.3s ลงในกฎ ::after แต่รีเซ็ตเป็นศูนย์เมื่อเลื่อนเมาส์ออก หรือใช้ transition: opacity 0.15s 0.3s; เพื่อหน่วงการปรากฏโดยไม่หน่วงการหายไป

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

เครื่องมือที่เกี่ยวข้อง

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

เครื่องมือตรวจสอบหมายเลขโทรศัพท์

ตรวจสอบโครงสร้างหมายเลขตามประเทศ พร้อมดูภูมิภาค ประเภท และรูปแบบ E.164 ระหว่างประเทศ ในประเทศ และ RFC 3966

เครื่องมือนี้มีให้บริการในภาษาอื่น