Hướng dẫn html tooltip attribute - thuộc tính chú giải công cụ html
Đã đăng vào thg 2 20, 2019 1:16 SA 2 phút đọc 2 phút đọc Giới thiệuTooltips là chú thích tuyệt vời để bổ sung và làm phong phú trải nghiệm người dùng cung cấp gợi ý và thêm thông tin cho người dùng. Có rất nhiều plugin JavaScript cung cấp chức năng này, nhưng nếu bạn không muốn sử dụng các thư viện đó, thì có thể xử lý nó chỉ bằng cách sử dụng sử dụng data attributes của HTML và môt số CSS đơn giản. Cách thực hiện
Sau đó ta CSS tạo hiêu ứng sau khi hover và ta sẽ được kết quả như ảnh: Custom TooltipsNgoài ra ta có thể tao ra tooltips ở các vị trí khác nhau như trên, dưới, trái, phải bằng cách thêm attributes tooltip-position và css cho attributes đó Ví dụ với tooltips ở bên trái:
Tiếp theo ta sẽ CSS cho thẻ HTML trên bằng cách sử dung ::after và ::before để tạo ra 1 hình chữ nhât đơn giản với nội dụng sử dụng data-c-tooltip trong thẻ HTML, và mũi tên phía dưới của tooltips. Sau đó ta CSS tạo hiêu ứng sau khi hover và ta sẽ được kết quả như ảnh: Custom Tooltips Ngoài ra ta có thể tao ra tooltips ở các vị trí khác nhau như trên, dưới, trái, phải bằng cách thêm attributes tooltip-position và css cho attributes đó Cách để - TooltipTìm hiểu cách tạo công cụ với CSS. Di chuột qua văn bản dưới đây: Hãy tự mình thử » Mẹo: Chuyển đến hướng dẫn CSS Tooltip của chúng tôi để tìm hiểu thêm về Tooltips.Thí dụDi chuột qua tôi & nbsp; Toàn bộ thông báo văn bản Bước 2) Thêm CSS:Thí dụ / * Container Tooltip */. Tooltip {& nbsp; & nbsp; vị trí: tương đối; & nbsp; Hiển thị: Inline-Block; & nbsp; & nbsp; Border-Bottom: 1px chấm chấm; / * Nếu bạn muốn chấm dưới văn bản có thể di chuyển */} / * Tooltip Text */. Tooltip .ToolTipText {& nbsp; khả năng hiển thị: ẩn; & nbsp; chiều rộng: 120px; & nbsp; màu nền: #555; & nbsp; Màu sắc: #fff; & nbsp; Văn bản-Align: Center; & nbsp; & nbsp; Padding: 5px 0; & nbsp; Biên giới-Radius: 6px; & nbsp; / * Định vị văn bản công cụ */& nbsp; Vị trí: Tuyệt đối; & nbsp; Z-index: 1; & nbsp; Dưới cùng: 125%; & nbsp; & nbsp; trái: 50%; & nbsp; lề trái: -60px; & nbsp; & nbsp;/ * fade trong tooltip */& nbsp; & nbsp; opacity: 0; & nbsp; & nbsp; chuyển tiếp: opacity 0.3s;} / * Mũi tên Tooltip */. Tooltip .ToolTipText :: sau {& nbsp; & nbsp; nội dung: ""; & nbsp; Vị trí: Tuyệt đối; & nbsp; Top: 100%; & nbsp; trái: 50%; & nbsp; & nbsp; lề -trái: -5px; & nbsp; Độ rộng biên giới: 5px; & nbsp; & nbsp; kiểu biên giới: solid; & nbsp; & nbsp; màu biên giới: #555 trong suốt trong suốt trong suốt;} / * Hiển thị văn bản Tooltip khi bạn chuột qua container Tooltip */. ToolTip: Hover .ToolTipText {& nbsp; khả năng hiển thị: hiển thị; & nbsp; & nbsp; opacity: 1;} Hãy tự mình thử » Mẹo: Chuyển đến hướng dẫn CSS Tooltip của chúng tôi để tìm hiểu thêm về Tooltips. Go to our CSS Tooltip Tutorial to learn more about tooltips. Mẹo: Để tạo các công cụ "có thể nhấp", hãy truy cập cách tạo hướng dẫn bật lên của chúng tôi To create "clickable" tooltips, go to our How To Create Popups Tutorial Mẹo: Phương thức cũng tương tự như chú giải công cụ. Chuyển đến cách tạo hướng dẫn phương thức để tìm hiểu về phương thức. Modals are also similar to tooltips. Go to our How To Create Modals Tutorial to learn about modals. |