Softonic

Trình tạo Tooltip CSS

Bước 1 / 2
Tiếp theo

Tooltip thường là thứ đầu tiên khiến một dự án vội vàng dùng đến thư viện JavaScript, nhưng một phần tử giả ::after đơn giản được điều khiển bởi thuộc tính data-tooltip đã bao quát được 90% các trường hợp thực tế. Trình tạo này xuất ra chính xác các quy tắc .tooltip và .tooltip::after mà bạn cần: chọn vị trí trên, dưới, trái hoặc phải, điều chỉnh màu nền và màu chữ, rồi sao chép khối mã vào bảng định kiểu của bạn.

Cách gắn tooltip vào HTML của bạn

  1. 1

    Chọn một vị trí

    Trên, dưới, trái hoặc phải. Trình tạo dùng `calc(100% + 8px)` cùng với transform phù hợp để bong bóng bám sát vào phần tử kích hoạt.

  2. 2

    Chọn màu

    Màu nền được áp dụng cho bong bóng, còn màu chữ được áp dụng cho nhãn của tooltip. Để dễ đọc, hãy giữ tỷ lệ tương phản từ 4,5:1 trở lên.

  3. 3

    Sao chép CSS

    Dán khối mã đã tạo vào bảng định kiểu của bạn. Nó cung cấp các quy tắc `.tooltip`, `.tooltip::after` và `:hover`.

  4. 4

    Đánh dấu phần tử kích hoạt

    Thêm `class="tooltip" data-tooltip="Nội dung của bạn"` vào bất kỳ phần tử nào. `::after` đọc thuộc tính này qua `content: attr(data-tooltip)`.

Tooltip bằng CSS thuần: bạn được gì và phải đánh đổi gì

Một tooltip chỉ dùng CSS có kích thước nhỏ, chạy nhanh và vẫn hoạt động ngay cả khi JavaScript bị tắt. Tuy nhiên, nó nằm trong thứ tự nguồn của DOM nên kế thừa một số hạn chế mà bạn phải tính toán để né tránh khi thiết kế.

CSS được tạo ra làm gì

  • Đặt phần tử kích hoạt thành position: relative để tooltip định vị tuyệt đối được neo vào nó.
  • Lấy nhãn từ content: attr(data-tooltip), nghĩa là bạn không bao giờ phải viết trùng nội dung.
  • Tạo hiệu ứng độ mờ bằng transition: opacity 0.15s, giúp tooltip xuất hiện nhanh nhưng không đột ngột.
  • Dùng pointer-events: none trên bong bóng để nó không bao giờ chặn thao tác nhấp vào phần tử kích hoạt.

Tính toán vị trí

Vị trí Quy tắc dịch chuyển
trên bottom: calc(100% + 8px); left: 50%; translateX(-50%)
dưới top: calc(100% + 8px); left: 50%; translateX(-50%)
trái right: calc(100% + 8px); top: 50%; translateY(-50%)
phải left: calc(100% + 8px); top: 50%; translateY(-50%)

Lưu ý về khả năng truy cập

  • data-tooltip không được trình đọc màn hình đọc lên. Nếu thông tin đó quan trọng, hãy kết hợp nó với aria-label hoặc văn bản hiển thị.
  • Người dùng bàn phím cần cả :focus-visible lẫn :hover. Hãy mở rộng quy tắc đã tạo thành .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }.
  • Các tooltip bị cắt bởi overflow: hidden trên một phần tử tổ tiên sẽ biến mất. Hãy di chuyển phần tử kích hoạt ra khỏi vùng chứa cắt xén, hoặc chuyển sang dùng popover được kết xuất bằng JavaScript cho các giao diện dày đặc.

Câu hỏi thường gặp

Phần tử giả giúp giữ DOM gọn gàng, tránh việc viết trùng văn bản nhãn và cho phép bạn tạo kiểu cho tooltip mà không lo vô tình khớp với các phần tử khác. Cái giá phải trả là nội dung ::after không thể được công nghệ hỗ trợ lập chỉ mục, vì vậy hãy củng cố phần văn bản quan trọng bằng aria-label.

Có, hãy thêm một phần tử giả thứ hai, ví dụ .tooltip::before, tạo hình bằng một hộp có chiều rộng và chiều cao bằng không với các viền được tô màu. Đây là thủ thuật tam giác CSS kinh điển; công cụ CSS Triangle Generator đi kèm trong bộ này sẽ tạo ra chính xác các khai báo viền mà bạn cần.

Thêm transition-delay: 0.3s vào quy tắc ::after nhưng đặt lại về không khi con trỏ rời đi; hoặc dùng transition: opacity 0.15s 0.3s; để trì hoãn việc xuất hiện mà không trì hoãn việc biến mất.

Vị trí và màu sắc bạn chọn được gửi đến máy chủ của chúng tôi để tạo mã CSS, nhưng không được lưu trữ hay tái sử dụng. Trên trang nhiều bước, các giá trị này được truyền qua liên kết giữa các bước; ở chế độ một trang, không có gì được giữ lại.

Công cụ liên quan

Bảng tham chiếu ASCII

Bảng ASCII đầy đủ từ 0 đến 127 với giá trị thập phân, thập lục phân, bát phân, nhị phân và ký hiệu tham chiếu ký tự số HTML, gồm NUL, LF và DEL.

Tham chiếu ký tự HTML

Danh sách có thể tìm kiếm các thực thể HTML, mã tên và mã số tương ứng của chúng, cùng chức năng sao chép chỉ với một cú nhấp cho các ký tự đặc biệt và biểu tượng.

Bảng tham khảo phím tắt

Tìm phím tắt mặc định theo tài liệu của VS Code, Chrome và Bash dùng GNU Readline trên macOS, Windows và Linux.

Bộ chuyển đổi Base64 sang Hex

Chuyển chuỗi Base64 chuẩn thành các byte nền tảng được viết dưới dạng hexadecimal liên tục in hoa. Giải mã nghiêm ngặt, lý tưởng cho token, khóa và chữ ký JWT.

Trình xem hex của tệp nhị phân

Chọn một tệp và kiểm tra phần dữ liệu giới hạn từ bất kỳ offset byte hợp lệ nào dưới dạng hex dump cục bộ với cột offset, hex và ASCII.

Trình tạo bảng màu ngẫu nhiên

Tạo bảng màu ngẫu nhiên từ 2 đến 15 mẫu màu, chọn phong cách rực rỡ, pastel, dịu hoặc tối, rồi sao chép mã HEX hoặc biến CSS.

Công cụ này có phiên bản bằng các ngôn ngữ khác