Chú giải công cụ được sử dụng để cung cấp gợi ý văn bản tương tác cung cấp cho người dùng ý tưởng về phần tử khi con trỏ chuột di chuyển qua. Ví dụ: trong hình ảnh bên dưới GeeksForGeeks là một nút và khi người dùng di chuột qua nó, thông tin bổ sung “Cổng thông tin khoa học máy tính” sẽ bật lên
Vị trí của Chú giải công cụ. Tùy thuộc vào các giá trị được đặt thành trên cùng, dưới cùng, trái và phải, Chú giải công cụ có thể được định vị ở bất kỳ mức độ nào. Có bốn vị trí chủ yếu được sử dụng rộng rãi trong khi xây dựng Chú giải công cụ để thể hiện tốt hơn và mang lại trải nghiệm tốt cho người dùng
Trong thiết kế giao diện người dùng, chúng ta thường cần hiển thị thông tin hạn chế bằng hình ảnh hoặc biểu tượng. Khi di chuột qua nó, chúng tôi có thể hiển thị thêm thông tin bằng chú giải công cụ
Bài viết này sẽ hướng dẫn bạn thiết kế các loại mũi tên tooltip bằng CSS thuần túy. Chúng tôi sẽ vẽ mũi tên trên các bộ chọn giả như
border-top: 15px solid ;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
7 và border-top: 15px solid ;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
8 với vị trí border-top: 15px solid ;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
9 trong CSS thuần túyHãy bắt đầu thiết kế…
Chúng ta sẽ vẽ hình dạng mũi tên tooltip nào?- Tam giác
- tam giác vuông
- cong
- cong chữ V
- Khoanh tròn
Nhà tài trợ
Công bằng - Hệ thống, Thói quen, Mục tiêu
Xây dựng một hệ thống để tốt hơn 1% mỗi ngày
công bằng. mạng sống
Tam giác
Hãy bắt đầu với một thiết kế đơn giản
Để tạo mũi tên hình tam giác, hãy thực hiện các thay đổi sau trên bộ chọn giả
border-top: 15px solid ;
border-right: 15px solid transparent;
0,- Thêm đường viền trên cùng với bất kỳ màu sắc và chiều rộng nào
- Làm cho đường viền bên trái và bên phải trong suốt với cùng chiều rộng với đường viền trên cùng
border-top: 15px solid ;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
Và bạn đã hoàn thành. Xem mã đầy đủ bên dưới
tam giác vuông
Thêm các thay đổi sau vào bộ chọn giả
border-top: 15px solid ;
border-right: 15px solid transparent;
0,- Thêm đường viền trên cùng với bất kỳ màu sắc và chiều rộng nào
- Làm cho đường viền bên phải trong suốt có cùng chiều rộng với đường viền trên cùng
border-top: 15px solid ;
border-right: 15px solid transparent;
Xem ví dụ làm việc bên dưới bút,
chú giải công cụ dồn vào góc bởi codepencong
Đây là một mũi tên hơi phức tạp. Đừng lo lắng, chúng tôi sẽ làm cho nó đơn giản
Thêm CSS bên dưới vào
border-top: 15px solid ;
border-right: 15px solid transparent;
0,height: 40px;
width: 20px; /* half of height */
background-color: ;
border-bottom-right-radius: 20px;
Và bạn sẽ có,
Sau đó, thêm bóng hộp và làm nền trong suốt. Bạn có thể thấy các thay đổi trong giao diện người dùng của mình.
______03 nghiêng 270 độ và lật ngang với thuộc tính
border-top: 15px solid ;
border-right: 15px solid transparent;
4. ________số 8Và bạn sẽ có một mũi tên cong. Xem mã đầy đủ trong bút bên dưới,
cong-tooltip bởi codepencong chữ V
Trong phần này, chúng tôi sẽ sử dụng cả bộ chọn
border-top: 15px solid ;
border-right: 15px solid transparent;
0 và border-top: 15px solid ;
border-right: 15px solid transparent;
6Thêm CSS bên dưới vào
border-top: 15px solid ;
border-right: 15px solid transparent;
0 và border-top: 15px solid ;
border-right: 15px solid transparent;
6 , border-top: 15px solid ;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
3Và bạn sẽ thấy,
Bây giờ, phần còn lại là đơn giản. Thêm bóng hộp và làm cho nền trong suốt trong cả hai bộ chọn
border-top: 15px solid ;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
4Và mũi tên đã sẵn sàng. Xem mã dưới đây bằng bút,
v-cong-tooltip bằng codepenKhoanh tròn
Tạo một vòng tròn với bất kỳ màu nào và sau đó thêm mã bên dưới vào
border-top: 15px solid ;
border-right: 15px solid transparent;
0 border-top: 15px solid ;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
6Một lần nữa, đây chỉ là trò chơi biên giới. Xem mã đầy đủ bên dưới bút
Bài viết phổ biến liên quan
CSS. Các lớp giả nâng cao với các ví dụ
Rút ngắn phong cách và nhanh chóng thiết kế
Blog. mái che. com
Tailwind CSS — Hoạt ảnh tùy chỉnh
Hoạt hình thêm sức sống cho các đối tượng
Blog. mái che. com
Hoạt hình với chuyển tiếp CSS và Vue
Cung cấp cho trang web của bạn một nét hiện đại bằng cách thêm hoạt ảnh mang lại trải nghiệm người dùng tuyệt vời cho khách truy cập trang web
Blog. mái che. com
Cảm ơn vì tình yêu bạn đang thể hiện
Nếu bạn thích những gì bạn đọc, hãy chắc chắn rằng bạn sẽ không bỏ lỡ cơ hội để tặng 👏 👏👏 bên dưới — với tư cách là một nhà văn, điều đó có nghĩa là cả thế giới