Tiếng Việt

Hướng dẫn CSS

Hướng dẫn CSS3

CSS Nâng cao

Tham chiếu CSS

CSS T响应

CSS - Tooltips: Hướng dẫn cơ bản

Xin chào các nhà thiết kế web tương lai! Hôm nay, chúng ta sẽ khám phá thế giới kỳ diệu của CSS tooltips. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi rất vui mừng được hướng dẫn bạn trong hành trình này. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ những điều cơ bản nhất và dần dần nâng cao. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và chúng ta hãy bắt đầu!

CSS - Tooltips

Tooltips là gì?

Trước khi chúng ta nhảy vào tạo tooltips, hãy hiểu chúng là gì. Hãy tưởng tượng bạn đang di chuột qua một biểu tượng trên trang web, và đột nhiên một hộp nhỏ xuất hiện với một số thông tin bổ sung. Đó chính là tooltip! Chúng giống như những người bạn nhỏ giúp cung cấp thêm ngữ cảnh mà không làm rối loạn nội dung chính của bạn.

Tạo Tooltips

Hãy bắt đầu bằng cách tạo một tooltip đơn giản. Chúng ta sẽ cần một chút HTML và CSS cho điều này. Đừng lo lắng nếu bạn không hiểu ngay lập tức - chúng ta sẽ phân tích từng bước.

<div class="tooltip">Di chuột qua tôi!
<span class="tooltiptext">Đây là một tooltip</span>
</div>

Bây giờ, hãy thêm một chút CSS để nó hoạt động:

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

Hãy phân tích này:

  1. Chúng ta đặt container chính thành position: relative để chúng ta có thể định vị tooltip tương đối với nó.
  2. Văn bản tooltip bị ẩn theo mặc định với visibility: hidden.
  3. Chúng ta sử dụng position: absolute để định vị tooltip.
  4. Pseudo-class :hover làm cho tooltip hiển thị khi chúng ta di chuột qua container.

Định vị Tooltips

Bây giờ chúng ta đã biết cách tạo một tooltip cơ bản, hãy khám phá các cách khác nhau để định vị chúng. Chúng ta có thể đặt tooltips ở trên, dưới, bên phải hoặc bên trái của một phần tử.

Tooltip ở Trên

Chúng ta đã thấy một tooltip ở trên trong ví dụ đầu tiên. Dưới đây là một nhắc nhở:

.tooltip .tooltiptext {
bottom: 125%;
left: 50%;
margin-left: -60px;
}

Tooltip ở Dưới

Để tạo một tooltip ở dưới, chúng ta chỉ cần thay đổi một vài dòng:

.tooltip .tooltiptext {
top: 125%;
left: 50%;
margin-left: -60px;
}

Tooltip ở Bên Phải

Đối với một tooltip ở bên phải, chúng ta điều chỉnh vị trí như sau:

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

Tooltip ở Bên Trái

Và cho một tooltip ở bên trái:

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

Mũi tên Tooltips

Bây giờ, hãy thêm một chút linh hoạt cho tooltips của chúng ta với mũi tên! Những tam giác nhỏ này làm cho tooltips của bạn trông chuyên nghiệp hơn và giúp chỉ vào phần tử chính xác mà chúng mô tả.

Tooltip ở Trên với Mũi tên

Để thêm một mũi tên vào tooltip ở trên, chúng ta sẽ sử dụng pseudo-element ::after:

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

Điều này tạo ra một tam giác nhỏ chỉ xuống từ tooltip.

Tooltip ở Dưới với Mũi tên

Đối với một mũi tên ở dưới, chúng ta sẽ sử dụng CSS tương tự nhưng thay đổi vị trí và màu sắc của viền:

.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}

Tooltip ở Bên Phải với Mũi tên

Đối với một mũi tên chỉ sang bên phải:

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}

Tooltip ở Bên Trái với Mũi tên

Và cho một mũi tên chỉ sang bên trái:

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}

Tooltips xuất hiện dần

Muốn thêm một chút动画 vào tooltips của bạn? Hãy làm cho chúng xuất hiện dần!

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

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

CSS này sẽ làm cho tooltip của bạn xuất hiện dần trong 0.3 giây khi bạn di chuột qua phần tử.

Lợi ích của Tooltips

Bây giờ chúng ta đã học cách tạo và thiết kế tooltips, hãy nói về lý do tại sao chúng lại tuyệt vời:

  1. Tiết kiệm không gian: Tooltips cho phép bạn cung cấp thêm thông tin mà không làm rối loạn nội dung chính.
  2. Dễ sử dụng: Chúng cung cấp giải thích ngay lập tức nơi người dùng cần.
  3. Tăng cường UX: Tooltips có thể hướng dẫn người dùng qua giao diện của bạn, làm cho việc导航 dễ dàng hơn.
  4. Linh hoạt: Như chúng ta đã thấy, tooltips có thể được định vị và thiết kế theo nhiều cách khác nhau để phù hợp với thiết kế của bạn.

Phương pháp Tooltips

Dưới đây là bảng tóm tắt các phương pháp tooltip mà chúng ta đã covered:

Phương pháp Mô tả
Top Tooltip Xuất hiện ở trên phần tử
Bottom Tooltip Xuất hiện ở dưới phần tử
Right Tooltip Xuất hiện ở bên phải phần tử
Left Tooltip Xuất hiện ở bên trái phần tử
Arrow Tooltips Thêm mũi tên vào tooltip
Fade-in Tooltip Thêm animation fade-in

Và thế là xong, các bạn! Bây giờ bạn đã có kiến thức để tạo ra những tooltips thời trang và thông tin cho các dự án web của mình. Nhớ rằng, thực hành làm cho hoàn hảo, vì vậy đừng ngại thử nghiệm với các phong cách và vị trí khác nhau. Ai biết được? Bạn có thể tạo ra điều gì đó lớn trong thiết kế tooltip!

Chúc các bạn may mắn và mong tooltips của bạn luôn hữu ích và không gây phiền phức!

Credits: Image by storyset

Hướng Dẫn Trước:
CSS - Box Sizing
Hướng Dẫn Tiếp Theo:
CSS - Nút