Khi bạn đang thiết kế một trang web, bạn có thể quyết định rằng bạn muốn hiển thị thông tin bổ sung về điều gì đó trên trang web khi người dùng di chuột qua một phần tử trên trang web.
Ví dụ:nếu bạn đang thiết kế trang Câu hỏi thường gặp, bạn có thể muốn thông tin bổ sung xuất hiện về các thuật ngữ kỹ thuật được liệt kê trên trang web. Thông tin này sẽ chỉ xuất hiện khi người dùng di chuột qua một thuật ngữ kỹ thuật.
Để hiển thị thông tin về điều gì đó khi người dùng di chuột qua một phần tử, bạn có thể tạo chú giải công cụ. Trong hướng dẫn này, chúng ta sẽ thảo luận, có tham chiếu đến một ví dụ, cách tạo chú giải công cụ trong CSS. Khi đọc xong hướng dẫn này, bạn sẽ trở thành chuyên gia tạo chú giải công cụ trong CSS.
Chú giải công cụ CSS
Chú giải công cụ được sử dụng để thêm thông tin về một phần tử trên trang web. Chú giải công cụ xuất hiện ở một số nơi khác nhau trên các trang web, đặc biệt khi tác giả của một trang web muốn làm rõ điều gì đó hoặc thêm định nghĩa cho một từ trong một khối văn bản.
Không có phần tử HTML mặc định nào được sử dụng để tạo chú giải công cụ. Vì vậy, chúng ta phải dựa vào sự kết hợp của HTML và CSS để thiết kế một phần tử xuất hiện giống như một chú giải công cụ.
Hãy bắt đầu bằng cách viết mã HTML cho chú giải công cụ của chúng tôi. Trong ví dụ này, chúng ta sẽ tạo một chú giải công cụ cho một trang web công thức nấu ăn. Khi người dùng di chuột qua cụm từ prepare the baking tray ., chú giải công cụ sẽ xuất hiện với một số văn bản để nhắc nhở người đọc cách chuẩn bị khay nướng.
Đây là mã HTML cho chú giải công cụ của chúng tôi:
<html> <div style="text-align:center;"> <p>Instructions for baking:</p> <div class="tooltip">Prepare the baking tray. <span class="contents">Line tray with greaseproof paper.</span> <div> </div>
Đầu tiên, trong mã của chúng tôi, chúng tôi đã tạo thẻ
style bộ thuộc tính. Kiểu mà chúng ta đã xác định căn chỉnh văn bản trong thẻ
để tạo một đoạn văn bản có chứa văn bản Instructions for baking: .
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Tiếp theo, chúng tôi tạo một dải phân cách, trong đó chú giải công cụ của chúng tôi sẽ xuất hiện. Thao tác này sẽ hiển thị dòng chữ Prepare the baking tray . Bên trong thẻ
Prepare the baking tray . Ngay bây giờ, mã của chúng tôi hiển thị tất cả văn bản trên màn hình. Điều này là do chúng tôi chưa áp dụng bất kỳ kiểu nào cho mã của mình để tạo chú giải công cụ. Dưới đây là các kiểu chúng tôi sẽ sử dụng để tạo chú giải công cụ CSS của chúng tôi:
<html>
<div style="text-align:center;">
<p>Instructions for baking:</p>
<div class="tooltip">Prepare the baking tray.
<span class="contents">Line tray with greaseproof paper.</span>
<div>
</div>
<style>
.tooltip {
display: inline-block;
position: relative;
margin: 50px;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: lightblue;
color: white;
text-align: center;
padding: 10px 0;
border-radius: 5px;
position: absolute;
z-index: 1;
}
.tooltip:hover .contents {
visibility: visible;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong mã của chúng tôi, chúng tôi đã tạo một chú giải công cụ được kích hoạt khi người dùng di chuột qua văn bản Prepare the baking tray . Chú giải công cụ này chứa một lời nhắc ngắn gọn về cách chuẩn bị khay nướng cho người đọc trên trang web của chúng tôi.
Hãy phân tích cách mã CSS của chúng tôi hoạt động, để bạn biết cách tạo chú giải công cụ dữ liệu của chúng tôi.
.tooltip kiểu
Đầu tiên, chúng tôi đã tạo một quy tắc kiểu có tên .tooltip, được áp dụng cho thẻ
Chúng tôi cũng đặt vị trí của chú giải công cụ thành tương đối, có nghĩa là chú giải công cụ sẽ ở cùng một vị trí ngay cả khi trang được cuộn. Bạn có thể tìm hiểu thêm về định vị CSS trong hướng dẫn của chúng tôi về vị trí CSS.
Cuối cùng, chúng tôi đã chỉ định lề 50px xung quanh văn bản chú giải công cụ của mình, điều này cho phép chúng tôi tạo khoảng cách giữa văn bản chú giải công cụ của chúng tôi và các phần tử khác trên trang web. Bạn có thể tìm hiểu thêm về lợi nhuận trong hướng dẫn dành cho người mới bắt đầu của chúng tôi về lợi nhuận CSS.
.tooltip .contents Style
Tiếp theo, chúng tôi đã xác định một quy tắc kiểu được gọi là .tooltip .contents, được áp dụng cho bất kỳ phần tử nào có tên lớp contents mà lớp cha có tên tooltip .
Đối với ví dụ này, điều này có nghĩa là quy tắc kiểu này được áp dụng cho thẻ của chúng tôi. Quy tắc này chứa các kiểu cho thuộc tính chú giải công cụ thực tế của chúng tôi.
Trong kiểu .contents của chúng tôi, chúng tôi chỉ định giá trị của visibility thuộc tính hidden . Điều này có nghĩa là, cho đến khi có quy định khác, chú giải công cụ sẽ bị ẩn khỏi người dùng.
Sau đó, chúng tôi đặt chiều rộng (width) của chú giải công cụ thành 120px, màu nền (background-color) của chú giải công cụ thành màu xanh lam nhạt và màu văn bản (màu) của văn bản trong chú giải công cụ thành màu trắng. Ngoài ra, chúng tôi đã căn chỉnh văn bản trong chú giải công cụ vào giữa phần tử bằng cách sử dụng căn chỉnh văn bản.
Ở phần cuối của quy tắc .contents, chúng tôi đặt một phần đệm 10px, tạo khoảng cách giữa văn bản trong chú giải công cụ của chúng tôi và các đường viền của nó. Chúng tôi cũng thiết lập bán kính đường viền là 15px, mang lại cho chú giải công cụ của chúng tôi hiệu ứng các góc tròn.
Tiếp theo, chúng tôi đặt giá trị vị trí của phần tử .contents thành absolute , có nghĩa là phần tử .contents được định vị so với phần tử mẹ. Trong trường hợp này, phần tử gốc trong mã HTML của chúng tôi là thẻ
.tooltip:di chuột .contents Style
Cuối cùng, chúng tôi đã xác định một quy tắc có tên .tooltip:hover .contents. Quy tắc này được sử dụng để hiển thị văn bản chú giải công cụ khi người dùng di chuột qua phần tử có tên lớp tooltip .
Khi quy tắc này được thực thi, khả năng hiển thị của phần tử .contents được đặt thành visible . Điều này có nghĩa là khi người dùng di chuột qua chú giải công cụ, chú giải công cụ sẽ hiển thị trên trang web.
Định vị Chú giải công cụ CSS
Trong ví dụ trên, chú giải công cụ của chúng tôi xuất hiện ở bên phải văn bản khi người dùng di chuột qua nhãn Prepare the baking tray . Tuy nhiên, chúng tôi có thể tùy chỉnh điều này để chú giải công cụ của chúng tôi xuất hiện trên các cạnh khác nhau của văn bản.
Vị trí bên phải
Mã của chúng tôi từ trước đó đã đặt chú giải công cụ của chúng tôi ở bên phải văn bản của chúng tôi. Tuy nhiên, nếu chúng tôi đã tạo kiểu cho chú giải công cụ của mình xuất hiện theo một cách khác và muốn di chuyển chú giải công cụ của mình trở lại đúng vị trí, chúng tôi có thể sử dụng mã này:
.tooltip .contents {
top: -5px;
left: 105%;
}
Quy tắc CSS này, khi được kết hợp với mã của chúng tôi trước đó, đặt chú giải công cụ ở bên phải văn bản của chúng tôi. Quy tắc top:-5px căn chỉnh chú giải công cụ với tâm của phần tử vùng chứa của nó. Quy tắc left:105% đặt chú giải công cụ ở bên phải của vùng chứa vì nó lệch vị trí của chú giải công cụ ở bên trái bằng 105% chiều rộng của chú giải công cụ.
Mã của chúng tôi trả về:
Như bạn có thể thấy, chú giải công cụ của chúng tôi xuất hiện ở bên phải văn bản của chúng tôi.
Vị trí bên trái
Giả sử chúng ta muốn chú giải công cụ của mình xuất hiện ở bên trái văn bản của chúng ta. Chúng tôi có thể thực hiện điều này bằng cách sử dụng mã sau:
.tooltip .contents {
top: -5px;
right: 105%;
}
Mã này, khi được thêm vào mã của chúng tôi từ trước đó, đặt chú giải công cụ của chúng tôi ở bên trái văn bản của chúng tôi. Quy tắc top:-5px căn chỉnh chú giải công cụ với tâm của vùng chứa, như chúng ta đã thảo luận trong ví dụ trước. Quy tắc bên phải:105% cho phép chúng tôi đặt chú giải công cụ của mình ở bên trái vùng chứa (hoặc đúng hơn là bù đắp vị trí của chú giải công cụ ở bên phải bằng 105% chiều rộng của chú giải công cụ).
Đây là những gì mã của chúng tôi trả về:
Chú giải công cụ của chúng tôi xuất hiện ở bên trái văn bản của chúng tôi.
Vị trí hàng đầu
Giả sử chúng tôi muốn chú giải công cụ của mình xuất hiện phía trên văn bản. Chúng tôi có thể hoàn thành nhiệm vụ này bằng cách sử dụng mã sau:
.tooltip .contents {
bottom: 100%;
left: 50%;
margin-left: -60px;
}
Mã của chúng tôi trả về:
Trong ví dụ này, chúng tôi đã sử dụng ba kiểu CSS để định vị chú giải công cụ của chúng tôi phía trên văn bản của chúng tôi. Phần dưới:100% và bên trái:các kiểu 50% cho phép chúng tôi bù đắp chú giải công cụ của mình bằng 100% chiều rộng của nhãn chú giải công cụ (Prepare the baking tray ) từ dưới cùng và bên trái của nhãn chú giải công cụ, tương ứng.
Kiểu lề trái cho phép chúng ta căn giữa chú giải công cụ của mình. Vì chiều rộng của chú giải công cụ của chúng tôi là 120px, chúng tôi đã chỉ định giá trị lề trái là -60px (một nửa của 120px). Điều này đảm bảo chú giải công cụ của chúng tôi xuất hiện ở giữa phía trên nhãn chú giải công cụ của chúng tôi.
Vị trí dưới cùng
Giả sử chúng ta muốn chú giải công cụ của mình xuất hiện bên dưới Prepare the baking tray . nhãn mác. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
.tooltip .contents {
top: 100%;
left: 50%;
margin-left: -60px;
}
Mã của chúng tôi trả về:
Mã của chúng tôi sử dụng các kiểu giống như Top Position của chúng tôi ví dụ với một ngoại lệ. Trong ví dụ này, chúng tôi sử dụng kiểu top:100% (thay vì bottom:100% như chúng tôi đã sử dụng trong ví dụ trước). Kiểu này cho phép chúng tôi bù đắp hộp chú giải công cụ của mình bằng 100% chiều rộng của nhãn chú giải công cụ (Prepare the baking tray .), cho phép chúng tôi đặt hộp chú giải công cụ của mình bên dưới nhãn.
Làm mờ dần trong Chú giải công cụ
Khi thiết kế chú giải công cụ, bạn có thể quyết định rằng bạn muốn văn bản chú giải công cụ mờ dần khi người dùng di chuột qua chú giải công cụ. Điều này cho phép bạn tạo ra sự chuyển đổi đẹp mắt hơn về mặt thẩm mỹ khi chú giải công cụ được đặt để xuất hiện trên màn hình của người dùng.
Đây là kiểu bạn có thể sử dụng để tạo chú giải công cụ mờ dần:
.tooltip .contents {
opacity: 0;
transition: opacity 2s;
}
.tooltip:hover .contents {
opacity: 1;
}
Kiểu này, khi được kết hợp với mã từ ví dụ đầu tiên của chúng tôi, cho phép bạn đạt được hiệu ứng mờ dần. Hãy phân tích cách hoạt động của nó. Đầu tiên, chúng tôi chỉ định độ mờ của chú giải công cụ của chúng tôi là 0. Điều này có nghĩa là chú giải công cụ bị ẩn.
Sau đó, chúng tôi chỉ định một thuộc tính chuyển tiếp với hai giá trị:độ mờ và 2s. opacity đề cập đến thuộc tính CSS mà chúng tôi muốn áp dụng trong quá trình chuyển đổi của mình và 2s đề cập đến khoảng thời gian chuyển đổi của chúng tôi (tính bằng giây).
Tiếp theo, chúng tôi tạo quy tắc .tooltip:hover .contents đặt độ mờ của chú giải công cụ của chúng tôi thành 1 khi người dùng di chuột qua chú giải công cụ.
Điều này cho phép chúng tôi đạt được hiệu ứng khi người dùng di chuột qua chú giải công cụ, phần tử sẽ chuyển từ hoàn toàn mờ (vô hình) sang hiển thị hoàn toàn. Vì chúng tôi đã chỉ định thời lượng chuyển đổi của mình là 2 giây nên quá trình chuyển đổi này sẽ mất hai giây để hoàn tất.
Nếu bạn muốn tìm hiểu thêm về chuyển đổi CSS, hãy đọc hướng dẫn của chúng tôi về thuộc tính chuyển đổi CSS.
Kết luận
Chú giải công cụ được sử dụng để hiển thị thông tin bổ sung trên một trang web. Với sự trợ giúp từ HTML và CSS, bạn có thể thiết kế phần tử chú giải công cụ một cách thẩm mỹ cho phép bạn hiển thị thông tin bổ sung trên trang web.
Hướng dẫn này khám phá, có tham chiếu đến các ví dụ, cách tạo chú giải công cụ trong CSS và cách định vị chú giải công cụ của bạn ở bên trái, bên phải, dưới cùng và trên cùng của nhãn. Chúng tôi cũng thảo luận về cách tạo hiệu ứng mờ dần được kích hoạt khi người dùng di chuột qua nhãn chú giải công cụ.
Bây giờ bạn đã có kiến thức cần thiết để bắt đầu thiết kế chú giải công cụ CSS của riêng mình như một nhà thiết kế web chuyên nghiệp!