Thuộc tính Tooltip trong CSS thường được sử dụng để chỉ định thông tin bổ sung về điều gì đó khi người dùng di chuyển con trỏ chuột qua một phần tử

1. Cách sử dụng thuộc tính Tooltip cơ bản trong CSS

Ví dụ:

Trong đó:

HTML: Sử dụng một phần tử vùng chứa (như <div>) và thêm lớp “tooltip” vào nó. Khi người dùng di chuột qua <div> này, nó sẽ hiển thị văn bản chú giải cho phần tử đó

Văn bản chú giải được đặt bên trong một phần tử nội tuyến (như <span>) có lớp là class = “tooltiptext”

CSS: Lớp test sử dụng thuộc tính position:relative, cần thiết để xác định văn bản chú giải (position:absolute)

Lớp tooltiptext chứa văn bản chú giải thực tế. Nó bị ẩn theo mặc định và sẽ hiển thị khi di chuột qua. Chúng tôi cũng đã thêm một số kiểu cơ bản cho nó: chiều rộng 120px, màu nền đen, màu văn bản trắng, phần đệm trên và dưới 5px

Thuộc tính border-radius được sử dụng để thêm các góc tròn vào văn bản chú giải

Bộ chọn :hover được sử dụng để hiển thị văn bản chú giải khi người dùng di chuyển chuột qua <div> với class = “test”

2. Định hướng hộp chú giải của phần tử trong CSS

Trong ví dụ này, chú giải được đặt ở bên phải (left: 105%) của văn bản “có thể lưu trữ” (<div>). Cũng lưu ý rằng top: -5px được sử dụng để đặt nó ở giữa phần tử vùng chứa của nó. Chúng tôi sử dụng số 5 vì văn bản chú giải công cụ có phần đệm trên và dưới là 5px. Nếu bạn tăng phần đệm của nó, hãy đồng thời tăng giá trị của thuộc tính trên cùng để đảm bảo rằng thuộc tính ở giữa (nếu đây là thứ bạn muốn). Điều tương tự cũng áp dụng nếu bạn muốn chú giải được đặt ở bên trái

  • Hộp chú giải bên phải

  • Hộp chú giải bên trái

Nếu bạn muốn chú giải xuất hiện ở trên cùng hoặc ở dưới cùng, hãy xem các ví dụ bên dưới. Lưu ý rằng chúng tôi sử dụng thuộc tính margin-left với giá trị âm 60 pixel. Điều này là căn giữa chú giải công cụ trên / dưới văn bản. Nó được đặt thành một nửa chiều rộng của chú giải công cụ (120/2 = 60)

  • Hộp chú giải phía trên

  • Hộp chú giải phía dưới

3. Mũi tên của hộp chú giải trong CSS

Để tạo một mũi tên xuất hiện từ một phía cụ thể của chú giải, hãy thêm nội dung “trống” vào sau chú giải, với lớp phần tử giả ::after cùng với thuộc content. Bản thân mũi tên được tạo bằng cách sử dụng các đường viền. Điều này sẽ làm cho chú giải trông giống như bong bóng hội thoại

Ví dụ:

Trong đó:

Định vị mũi tên bên trong chú giải: top: 100% sẽ đặt mũi tên ở cuối chú giải. left: 50% sẽ căn giữa mũi tên

Lưu ý: Thuộc tính border-width chỉ định kích thước của mũi tên. Nếu bạn thay đổi điều này, cũng thay đổi margin-left thành như cũ. Điều này sẽ giữ cho mũi tên ở giữa

border-color được sử dụng để chuyển nội dung thành một mũi tên. Tôi đặt đường viền trên cùng thành màu đen và phần còn lại thành trong suốt. Nếu tất cả các mặt đều màu đen, bạn sẽ có một hộp hình vuông màu đen

Bạn có thể xem thêm ở các ví dụ bên dưới:


4. Làm mờ trong chú giải (sử dụng animation)

Nếu bạn muốn làm mờ văn bản chú giải khi nó sắp được hiển thị, bạn có thể sử dụng thuộc tính transition trong CSS cùng với thuộc tính opacity và chuyển từ chế độ mờ hoàn toàn sang hiển thị 100%

Ví dụ: