CSS Tooltip là cách đơn giản để trình bày một nội dung mà người dùng quan tâm nhưng lại không gây chiếm không gian web: chỉ khi người dùng di chuột lên văn bản hoặc hình ảnh nào đó thông tin mới hiện ra. Cách này có thể làm tăng trải nghiệm người dùng trên website bạn rất tốt. Trong bài viết này mình sẽ hướng dẫn mọi người làm một CSS Tooltip đơn giản mà không cần sử dụng đến JQuery - chúng ta chỉ cần CSS để làm điều đó. Ngoài ra, bạn có thể quyết định Tooltip sẽ hiển thị ở vị trí nào khi rê chuột lên bằng cách xác định vị trí hiển thị một cách dễ dàng.

​

HTML
Trước hết chúng ta cần đưa một đoạn mã HTML như sau:

HTML:

<div class="tooltip top">Hover over me
    <span class="tiptext">CSS Tooltip text</span>
</div>

CSS
Để hiển thị tooltip chúng ta sử dụng đoạn mã sau:

HTML:

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 6px 0;
    position: absolute;
    z-index: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.tooltip .tiptext::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid;
}
.tooltip:hover .tiptext {
    visibility: visible;
}

Để hiển thị tooltip ở các vị trí tùy chỉnh, chúng ta thực hiện thêm một số thuộc tính nữa. Bạn hãy so sánh:

Top Tooltip CSS:

Mã:

.tooltip.top .tiptext{
    margin-left: -60px;
    bottom: 150%;
    left: 50%;
}
.tooltip.top .tiptext::after{
    margin-left: -5px;
    top: 100%;
    left: 50%;
    border-color: #2E2E2E transparent transparent transparent;
}

Bottom Tooltip CSS:

HTML:

.tooltip.bottom .tiptext{
    margin-left: -60px;
    top: 150%;
    left: 50%;
}
.tooltip.bottom .tiptext::after{
    margin-left: -5px;
    bottom: 100%;
    left: 50%;
    border-color: transparent transparent #2E2E2E transparent;
}

Left Tooltip CSS:

HTML:

.tooltip.left .tiptext{
    top: -5px;
    right: 110%;
}
.tooltip.left .tiptext::after{
    margin-top: -5px;
    top: 50%;
    left: 100%;
    border-color: transparent transparent transparent #2E2E2E;
}

Right Tooltip CSS:

HTML:

.tooltip.right .tiptext{
    top: -5px;
    left: 110%;
}
.tooltip.right .tiptext::after{
    margin-top: -5px;
    top: 50%;
    right: 100%;
    border-color: transparent #2E2E2E transparent transparent;
}

Đơn giản chỉ cần vậy thôi là chúng ta có tooltip rồi.
Hi vọng cái tip đơn giản này giúp ích cho nhiều bạn