Chú giải trong CSS

Một chú thích (tooltip) thường được sử dụng để thêm thông tin cho điều gì đó khi người dùng di hoặc trỏ chuột vào phần tử.

Chú thích cơ bản

Tao một chú thích xuất hiện khi người dùng di chuyển chuột qua một phần tử:

<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    awidth: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

Giải thích ví dụ:

HTML) Sử dụng một phần tử 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. Văn bản chú giải được đặt bên trong một phần tử inline (như <span>) với class=”tooltiptext”.

CSS) Vị trí sử dụng lớp công cụ: tương đối, cần thiết để định vị văn bản chú giải công cụ (vị trí: tuyệt đối). Lưu ý: Xem ví dụ dưới đây về cách định vị chú giải công cụ. Lớp tooltiptext chứa văn bản chú giải. Nó được ẩn theo mặc định và sẽ hiển thị trên di chuột vào. Thêm một số định dạng cơ bản vào nó: chiều rộng 120px, màu nền đen, màu văn bản trắng, căn giữa văn bản, padding top và bottom 5px.

Thuộc tính border-radius CSS3 được sử dụng để thêm các góc được làm tròn vào văn bản chú giải. Trình 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 con chuột qua <div> với class=”tooltip”.

Định vị văn bản chú giải

Trong ví dụ này, chú giải được đặt ở bên phải (trái: 105%) của văn bản “hoverable” (<div>). Cũng lưu ý rằng top:-5px được sử dụng để đặt nó ở giữa phần tử chứa. Sử dụng số 5 vì văn bản chú giải có padding top và bottom là 5px. Nếu bạn tăng padding, cũng tăng giá trị của thuộc tính top để đảm bảo rằng độ căn giữa (nếu muốn). Áp dụng tương tự nếu bạn muốn chú giải được đặt ở bên trái.

Chú giải bên phải

.tooltip .tooltiptext {
    top: -5px;
    left: 105%; 
}

Chú giải bên trái

.tooltip .tooltiptext {
    top: -5px;
    right: 105%; 
}

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

Chú giải trên

.tooltip .tooltiptext {
    awidth: 120px;
    bottom: 100%;
    left: 50%; 
    margin-left: -60px; /* Use half of the awidth (120/2 = 60), to center the tooltip */
}

Chú giải dưới

.tooltip .tooltiptext {
    awidth: 120px;
    top: 100%;
    left: 50%; 
    margin-left: -60px; /* Use half of the awidth (120/2 = 60), to center the tooltip */
}

Chú giải có mũi tên

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

Mũi tên dưới

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-awidth: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

Giải thích ví dụ:

Vị trí mũi tên bên trong chú giải công cụ: top: 100% sẽ đặt mũi tên ở dưới cùng của chú giải. left: 50% sẽ canh giữa mũi tên.

Lưu ý: Thuộc tính border-awidth chỉ định kích thước của mũi tên. Nếu bạn thay đổi điều này, cũng cần thay đổi giá trị margin-left giống như vậy. Làm như vậy để căn giữa mũi tên.

Màu đường viền border-color được sử dụng để biến đổi nội dung thành một mũi tên. Thiết lập đường viền trên cùng sang màu đen, và phần còn lại để dạng mờ. Nếu không hộp lúc này sẽ thành màu đen.

Ví dụ thêm một mũi tên vào đầu của chú giải. Lưu ý rằng lần này sẽ thiết lập màu đường viền cuối cùng:

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-awidth: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

Ví dụ này thể hiện cách thêm mũi tên ở bên trái của chú giải:

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-awidth: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

Ví dụ này thể hiện cách thêm mũi tên ở bên phải của chú giải:

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-awidth: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

Chú giải mờ (kiểu hoạt hình)

Nếu bạn muốn làm phai mờ trong văn bản chú giải  khi nó được hiển thị, bạn có thể sử dụng thuộc tính chuyển tiếp CSS3 cùng với thuộc tính opacity:

.tooltip .tooltiptext {
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    opacity: 1;
}