Làm cách nào để tạo mũi tên tooltip bằng CSS?

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;

  border-top: 15px solid ;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;

  border-top: 15px solid ;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;

Hãy bắt đầu thiết kế…

• 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;

• 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;

• 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,

cong

Đâ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;

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;

Và bạn sẽ có một mũi tên cong. Xem mã đầy đủ trong bút bên dưới,

cong 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;

border-top: 15px solid ;
border-right: 15px solid transparent;

Thêm CSS bên dưới vào

border-top: 15px solid ;
border-right: 15px solid transparent;

border-top: 15px solid ;
border-right: 15px solid transparent;

  border-top: 15px solid ;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;

Và 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;

Và mũi tên đã sẵn sàng. Xem mã dưới đây bằng bút,

Khoanh 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;

  border-top: 15px solid ;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;

Mộ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

Làm cách nào để thêm mũi tên trong CSS?

Làm cách nào để đặt vị trí chú giải công cụ trong CSS?

Làm cách nào để tạo chú giải công cụ chỉ bằng CSS?

Làm cách nào để thêm mũi tên vào div trong CSS?