ตัวสร้าง CSS Tooltip

สร้าง tooltip ด้วย pure CSS ฟรี เลือกตำแหน่ง สี ลูกศร และ animation แล้วคัดลอก HTML กับ CSS ได้ในเบราว์เซอร์

Loading tool...

ตัวสร้าง CSS Tooltip คืออะไร?

CSS Tooltip Generator เป็นเครื่องมือฟรีในเบราว์เซอร์ที่สร้าง tooltip ด้วย CSS ล้วน เลือกตำแหน่งและลูกศร ปรับสี ขนาด และ animation แล้วคัดลอก HTML กับ CSS พร้อมวางสำหรับเว็บไซต์ของคุณ

ประโยชน์หลัก

ไม่ใช้ JavaScript — hover และ keyboard focus ทำงานได้ทันที
live preview ที่อัปเดตทุกครั้งที่แก้ค่า
รูปแบบที่เข้าถึงได้ สร้างบน button element จริง
คัดลอก CSS, HTML หรือ snippet เต็ม และดาวน์โหลด stylesheet ได้

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

•ป้ายคำใบ้เหนือช่องกรอกฟอร์มและปุ่มไอคอน
•คำอธิบายสั้น ๆ ข้างศัพท์เทคนิค
•ข้อความช่วยเหลือสำหรับปุ่มต่าง ๆ ใน dashboard
•คำใบ้ที่ใช้คีย์บอร์ดได้ในหน้าเอกสาร

วิธีใช้ตัวสร้าง CSS Tooltip

กรอกข้อความ: พิมพ์ข้อความบนปุ่มและข้อความ tooltip ตัวอย่างสดจะอัปเดตทันทีขณะพิมพ์
เลือกตำแหน่งและลูกศร: เลือกบน ขวา ล่าง หรือซ้าย เปิดใช้ลูกศรได้ตามต้องการ แล้วปรับระยะห่างกับขนาดลูกศรให้เข้ากับ layout
ตกแต่งกล่อง: ตั้งสีพื้น สีตัวอักษร ขนาดตัวอักษร padding และความโค้งมุม เปิด max-width สำหรับข้อความยาว และเลือก animation fade หรือ scale
คัดลอกโค้ด: คัดลอก CSS, HTML หรือ snippet รวม หรือดาวน์โหลด tooltip.css แล้วนำไปวางในหน้าเว็บ

คุณสมบัติหลัก

4 ตำแหน่ง พร้อมลูกศรที่เลือกแสดงได้
ปรับสี ขนาดตัวอักษร padding ความโค้ง และ max-width ได้
animation fade หรือ scale ปรับความยาวได้
คัดลอก CSS, HTML หรือ snippet รวม และดาวน์โหลดไฟล์ CSS
รันในเบราว์เซอร์ทั้งหมด โดยไม่อัปโหลด

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

tooltip เหล่านี้ต้องใช้ JavaScript ไหม?

ไม่ต้อง ตัวสร้างให้ผลลัพธ์เป็น CSS และ HTML เท่านั้น tooltip จะแสดงผ่าน hover และ focus-visible selector จึงทำงานได้แม้ปิด JavaScript

คนที่ใช้คีย์บอร์ดจะเห็น tooltip ได้อย่างไร?

ปุ่มเป็น button จริง เมื่อกด Tab มาถึงจะเกิด focus-visible ซึ่งแสดง tooltip ด้วยสไตล์เดียวกับ hover ส่วนจอสัมผัสสามารถเพิ่ม active state ใน selector เดียวกันได้

ใส่ข้อความยาวใน tooltip ได้ไหม?

ได้ ตั้งค่า max width แล้วข้อความจะขึ้นบรรทัดใหม่ โดยความกว้างกล่องใช้ max-content ถ้าต้องการให้อยู่บรรทัดเดียวให้ปล่อยค่าเป็น 0

ข้อความของเราถูกส่งออกไปไหมไหม?

ไม่ ข้อความ tooltip อยู่ใน data-tooltip attribute บนปุ่ม และถูกแสดงด้วย CSS attr function ทุกอย่างสร้างในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลด

คู่มือฉบับละเอียด

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

อ่านคู่มือฉบับเต็ม →

ตัวสร้าง CSS Tooltip

พรีเซ็ต

ข้อความ tooltip

ข้อความบนปุ่ม trigger

ตำแหน่ง

ระยะห่างจากปุ่ม

8px

ขนาดตัวอักษร

14px

ความโค้งมุม

6px

padding แนวตั้ง

6px

padding แนวนอน

10px

ความกว้างสูงสุด

0px

ตั้งเป็น 0 เพื่อให้ tooltip อยู่บรรทัดเดียว

สีพื้นหลัง tooltip

สีตัวอักษร tooltip

animation ตอนแสดง

ความยาว animation (ms)

200ms

แสดงลูกศร

ขนาดลูกศร

6px

ชื่อ CSS class

ใช้เป็น class ของปุ่มในโค้ดที่สร้าง

ตัวอย่างสด

เอาเมาส์ชี้ที่ปุ่ม หรือโฟกัสด้วยคีย์บอร์ด เพื่อดู tooltip

CSS ที่สร้าง

.tooltip-trigger {
  position: relative;
}

.tooltip-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #1f2937;
  color: #f9fafb;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-in-out;
  z-index: 50;
  pointer-events: none;
}

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

.tooltip-trigger::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-in-out;
  z-index: 50;
  pointer-events: none;
}

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

HTML ที่สร้าง

<button type="button" class="tooltip-trigger" data-tooltip="A helpful tooltip message">Hover or focus me</button>

snippet ฉบับเต็ม

<style>
.tooltip-trigger {
  position: relative;
}

.tooltip-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #1f2937;
  color: #f9fafb;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-in-out;
  z-index: 50;
  pointer-events: none;
}

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

.tooltip-trigger::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-in-out;
  z-index: 50;
  pointer-events: none;
}

.tooltip-trigger:hover::before,
.tooltip-trigger:focus-visible::before {
  opacity: 1;
  visibility: visible;
}
</style>

<button type="button" class="tooltip-trigger" data-tooltip="A helpful tooltip message">Hover or focus me</button>

เกี่ยวกับตัวสร้าง CSS Tooltip

สร้าง tooltip ด้วย CSS ล้วนในเบราว์เซอร์ เลือกตำแหน่ง เพิ่มลูกศร ปรับสีและ animation แล้วคัดลอก HTML กับ CSS ไปใช้ได้เลย ไม่ต้องใช้ JavaScript

ทำไมต้องใช้ตัวสร้างนี้

• ได้ผลลัพธ์ pure CSS รองรับ hover และ keyboard focus โดยไม่ต้องมี script
• live preview อัปเดตทันทีที่ปรับทุกค่า
• ใช้รูปแบบ markup ที่เข้าถึงได้ ด้วยปุ่มจริงและ focus-visible selector
• คัดลอก CSS, HTML หรือ snippet รวม และดาวน์โหลด stylesheet ได้
• รันในเบราว์เซอร์ทั้งหมด ไม่มีการอัปโหลด

คุณสมบัติเด่น

• 4 ตำแหน่ง พร้อมลูกศรเสริมที่ชี้ไปที่ปุ่ม
• ปรับสี ขนาดตัวอักษร padding ความโค้ง และ max-width ได้
• animation fade หรือ scale ปรับความยาวได้
• ได้ HTML และ CSS พร้อมวาง ตั้งชื่อ class ได้เอง
• ใช้งาน offline ได้หลังจากหน้าโหลดเสร็จ

Loading tool...

ตัวสร้าง CSS Tooltip คืออะไร?

ประโยชน์หลัก

ไม่ใช้ JavaScript — hover และ keyboard focus ทำงานได้ทันที
live preview ที่อัปเดตทุกครั้งที่แก้ค่า
รูปแบบที่เข้าถึงได้ สร้างบน button element จริง
คัดลอก CSS, HTML หรือ snippet เต็ม และดาวน์โหลด stylesheet ได้

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

•ป้ายคำใบ้เหนือช่องกรอกฟอร์มและปุ่มไอคอน
•คำอธิบายสั้น ๆ ข้างศัพท์เทคนิค
•ข้อความช่วยเหลือสำหรับปุ่มต่าง ๆ ใน dashboard
•คำใบ้ที่ใช้คีย์บอร์ดได้ในหน้าเอกสาร

วิธีใช้ตัวสร้าง CSS Tooltip

กรอกข้อความ: พิมพ์ข้อความบนปุ่มและข้อความ tooltip ตัวอย่างสดจะอัปเดตทันทีขณะพิมพ์
เลือกตำแหน่งและลูกศร: เลือกบน ขวา ล่าง หรือซ้าย เปิดใช้ลูกศรได้ตามต้องการ แล้วปรับระยะห่างกับขนาดลูกศรให้เข้ากับ layout
ตกแต่งกล่อง: ตั้งสีพื้น สีตัวอักษร ขนาดตัวอักษร padding และความโค้งมุม เปิด max-width สำหรับข้อความยาว และเลือก animation fade หรือ scale
คัดลอกโค้ด: คัดลอก CSS, HTML หรือ snippet รวม หรือดาวน์โหลด tooltip.css แล้วนำไปวางในหน้าเว็บ

คุณสมบัติหลัก

4 ตำแหน่ง พร้อมลูกศรที่เลือกแสดงได้
ปรับสี ขนาดตัวอักษร padding ความโค้ง และ max-width ได้
animation fade หรือ scale ปรับความยาวได้
คัดลอก CSS, HTML หรือ snippet รวม และดาวน์โหลดไฟล์ CSS
รันในเบราว์เซอร์ทั้งหมด โดยไม่อัปโหลด

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

tooltip เหล่านี้ต้องใช้ JavaScript ไหม?

คนที่ใช้คีย์บอร์ดจะเห็น tooltip ได้อย่างไร?

ใส่ข้อความยาวใน tooltip ได้ไหม?

ข้อความของเราถูกส่งออกไปไหมไหม?

คู่มือฉบับละเอียด

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

อ่านคู่มือฉบับเต็ม →

.tooltip-trigger { position: relative; } .tooltip-trigger::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background-color: #1f2937; color: #f9fafb; padding: 6px 10px; border-radius: 6px; font-size: 14px; line-height: 1.4; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 200ms ease-in-out; z-index: 50; pointer-events: none; } .tooltip-trigger:hover::after, .tooltip-trigger:focus-visible::after { opacity: 1; visibility: visible; } .tooltip-trigger::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; margin-left: -6px; border-width: 6px; border-style: solid; border-color: #1f2937 transparent transparent transparent; opacity: 0; visibility: hidden; transition: opacity 200ms ease-in-out; z-index: 50; pointer-events: none; } .tooltip-trigger:hover::before, .tooltip-trigger:focus-visible::before { opacity: 1; visibility: visible; }

ตัวสร้าง CSS Tooltip

ตัวสร้าง CSS Tooltip คืออะไร?

ประโยชน์หลัก

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

วิธีใช้ตัวสร้าง CSS Tooltip

คุณสมบัติหลัก

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

tooltip เหล่านี้ต้องใช้ JavaScript ไหม?

คนที่ใช้คีย์บอร์ดจะเห็น tooltip ได้อย่างไร?

ใส่ข้อความยาวใน tooltip ได้ไหม?

ข้อความของเราถูกส่งออกไปไหมไหม?

ตัวสร้างหมายเลขลอตเตอรี่

เครื่องมือทอยเหรียญ

ตัวสร้างคำสุ่ม

เครื่องมือสร้าง QR Code

เครื่องมือสร้าง Meme

ตัวสร้าง WiFi QR Code

ตัวสร้าง CSS Tooltip

เกี่ยวกับตัวสร้าง CSS Tooltip

ทำไมต้องใช้ตัวสร้างนี้

คุณสมบัติเด่น

ตัวสร้าง CSS Tooltip คืออะไร?

ประโยชน์หลัก

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

วิธีใช้ตัวสร้าง CSS Tooltip

คุณสมบัติหลัก

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

tooltip เหล่านี้ต้องใช้ JavaScript ไหม?

คนที่ใช้คีย์บอร์ดจะเห็น tooltip ได้อย่างไร?

ใส่ข้อความยาวใน tooltip ได้ไหม?

ข้อความของเราถูกส่งออกไปไหมไหม?

ตัวสร้างหมายเลขลอตเตอรี่

เครื่องมือทอยเหรียญ

ตัวสร้างคำสุ่ม

เครื่องมือสร้าง QR Code

เครื่องมือสร้าง Meme

ตัวสร้าง WiFi QR Code

เกี่ยวกับตัวสร้าง CSS Tooltip

ทำไมต้องใช้ตัวสร้างนี้

คุณสมบัติเด่น