Hướng dẫn how do you make a hover pop up in html? - làm cách nào để bạn tạo một cửa sổ bật lên trong html?


Tạo công cụ với CSS.


Bản demo: Ví dụ về chú giải công cụ

Một chú giải công cụ thường được sử dụng để chỉ định thông tin bổ sung về một cái gì đó khi người dùng di chuyển con trỏ chuột qua một phần tử:


Tooltip cơ bản

Tạo một chú giải công cụ xuất hiện khi người dùng di chuyển chuột qua một phần tử:

Thí dụ

/ * Container Tooltip */. Tooltip {& nbsp; & nbsp; vị trí: tương đối; & nbsp; Hiển thị: Inline-Block; & nbsp; Border-Bottom: 1px chấm màu đen; / * Nếu bạn muốn chấm dưới văn bản có thể di chuyển */}
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/ * Tooltip Text */. Tooltip .ToolTipText {& nbsp; & nbsp; khả năng hiển thị: hidden; & nbsp; & nbsp; width: 120px; & nbsp; màu nền: màu đen; & nbsp; & nbsp; color: #fff; & nbsp; & nbsp; văn bản-align: centre; & nbsp; Đệm: 5px 0; & nbsp; Biên giới-Radius: 6px;
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

& nbsp; & nbsp; /* Định vị văn bản Tooltip - Xem ví dụ bên dưới! */& nbsp; Vị trí: Tuyệt đối; & nbsp; Z-Index: 1;}
  position: absolute;
  z-index: 1;
}

/ * Hiển thị văn bản công cụ khi bạn chuột qua container Tooltip */. Tooltip: Hover .ToolTipText {& nbsp; & nbsp; khả năng hiển thị: hiển thị;}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

Di chuột qua tôi & nbsp; Toàn bộ thông báo văn bảnHover over me
  Tooltip text

Hãy tự mình thử »

Ví dụ giải thích

HTML: Sử dụng phần tử container (như) và thêm lớp "tooltip" vào nó. Khi chuột người dùng qua đây, nó sẽ hiển thị văn bản Tooltip. Use a container element (like

) and add the "tooltip" class to it. When the user mouse over this
, it will show the tooltip text.

Văn bản chú giải công cụ được đặt bên trong một phần tử nội tuyến (như) với class="tooltiptext".

CSS: Lớp tooltip Sử dụng position:relative, cần thiết để định vị văn bản chú giải công cụ (position:absolute). Lưu ý: Xem các ví dụ bên dưới về cách định vị Tooltip. The tooltip class use position:relative, which is needed to position the tooltip text (position:absolute). Note: See examples below on how to position the tooltip.

Lớp tooltiptext giữ văn bản Tooltip thực tế. Nó được ẩn theo mặc định và sẽ được hiển thị khi di chuột (xem bên dưới). Chúng tôi cũng đã thêm một số kiểu cơ bản vào nó: chiều rộng 120px, màu nền đen, màu văn bản trắng, văn bản giữa và đệm 5px trên và dưới.

Thuộc tính CSS border-radius được sử dụng để thêm các góc tròn vào văn bản Tooltip.

Bộ chọn :hover được sử dụng để hiển thị văn bản chú giải công cụ khi người dùng di chuyển chuột qua với class="tooltip".



Bộ công cụ định vị

Trong ví dụ này, chú giải công cụ được đặt ở bên phải (left:105%) của văn bản "có thể lượn" (). Cũng lưu ý rằng class="tooltiptext"0 được sử dụng để đặt nó ở giữa phần tử container của nó. Chúng tôi sử dụng số 5 vì văn bản Tooltip có phần đệm trên và dưới là 5px. Nếu bạn tăng đệm, cũng tăng giá trị của thuộc tính class="tooltiptext"1 để đảm bảo rằng nó ở giữa (nếu đây là thứ bạn muốn). Điều tương tự cũng áp dụng nếu bạn muốn công cụ được đặt ở bên trái.5 because the tooltip text has a top and bottom padding of 5px. If you increase its padding, also increase the value of the class="tooltiptext"1 property to ensure that it stays in the middle (if this is something you want). The same applies if you want the tooltip placed to the left.

Phù hợp công cụ

.tooltip .tooltiptext {& nbsp; Top: -5px; & nbsp; Trái: 105%; }
  top: -5px;
  left: 105%;
}

Result:

Di chuột qua me tocktip văn bảnTooltip text

Hãy tự mình thử »

Ví dụ giải thích

HTML: Sử dụng phần tử container (như) và thêm lớp "tooltip" vào nó. Khi chuột người dùng qua đây, nó sẽ hiển thị văn bản Tooltip.
  top: -5px;
  right: 105%;
}

Result:

Di chuột qua me tocktip văn bảnTooltip text

Hãy tự mình thử »

Ví dụ giải thích

HTML: Sử dụng phần tử container (như) và thêm lớp "tooltip" vào nó. Khi chuột người dùng qua đây, nó sẽ hiển thị văn bản Tooltip.

Văn bản chú giải công cụ được đặt bên trong một phần tử nội tuyến (như) với class="tooltiptext".
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

Result:

Di chuột qua me tocktip văn bảnTooltip text

Hãy tự mình thử »

Ví dụ giải thích

HTML: Sử dụng phần tử container (như) và thêm lớp "tooltip" vào nó. Khi chuột người dùng qua đây, nó sẽ hiển thị văn bản Tooltip.
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

Result:

Di chuột qua me tocktip văn bảnTooltip text

Hãy tự mình thử »


Ví dụ giải thích

HTML: Sử dụng phần tử container (như) và thêm lớp "tooltip" vào nó. Khi chuột người dùng qua đây, nó sẽ hiển thị văn bản Tooltip.

Văn bản chú giải công cụ được đặt bên trong một phần tử nội tuyến (như) với class="tooltiptext".

CSS: Lớp tooltip Sử dụng position:relative, cần thiết để định vị văn bản chú giải công cụ (position:absolute). Lưu ý: Xem các ví dụ bên dưới về cách định vị Tooltip.

Lớp tooltiptext giữ văn bản Tooltip thực tế. Nó được ẩn theo mặc định và sẽ được hiển thị khi di chuột (xem bên dưới). Chúng tôi cũng đã thêm một số kiểu cơ bản vào nó: chiều rộng 120px, màu nền đen, màu văn bản trắng, văn bản giữa và đệm 5px trên và dưới.
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

Result:

Di chuột qua me tocktip văn bảnTooltip text

Hãy tự mình thử »

Ví dụ giải thích

HTML: Sử dụng phần tử container (như) và thêm lớp "tooltip" vào nó. Khi chuột người dùng qua đây, nó sẽ hiển thị văn bản Tooltip.

Văn bản chú giải công cụ được đặt bên trong một phần tử nội tuyến (như) với class="tooltiptext". The class="tooltiptext"7 property specifies the size of the arrow. If you change this, also change the class="tooltiptext"2 value to the same. This will keep the arrow centered.

CSS: Lớp tooltip Sử dụng position:relative, cần thiết để định vị văn bản chú giải công cụ (position:absolute). Lưu ý: Xem các ví dụ bên dưới về cách định vị Tooltip.

Ví dụ này trình bày cách thêm một mũi tên vào đầu của chú giải công cụ. Lưu ý rằng chúng tôi đặt màu đường viền dưới cùng lần này:

Mũi tên trên cùng

.tooltip .tooltiptext :: sau {& nbsp; & nbsp; nội dung: ""; & nbsp; & nbsp; vị trí: tuyệt đối; & nbsp; / * Ở đầu tooltip */ & nbsp; trái: 50%; & nbsp; lề -bên trái: -5px; & nbsp; chiều rộng biên giới: 5px; & nbsp; Kiểu biên giới: Solid; & nbsp; Màu sắc biên giới: trong suốt trong suốt trong suốt trong suốt;}
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

Result:

Di chuột qua me tocktip văn bảnTooltip text

Hãy tự mình thử »

Ví dụ này trình bày cách thêm một mũi tên ở bên trái của chú giải công cụ:

Mũi tên trái

.tooltip .tooltiptext :: sau {& nbsp; nội dung: ""; & nbsp; & nbsp; vị trí: tuyệt đối; & nbsp; & nbsp; top: 50%; & nbsp; Phải: 100%; / * Ở bên trái của tooltip */& nbsp; TIP -TOP: -5px; & nbsp; chiều rộng biên giới: 5px; & nbsp; Kiểu biên giới: Solid; & nbsp; Màu sắc biên giới: minh bạch trong suốt trong suốt;}
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

Result:

Di chuột qua me tocktip văn bảnTooltip text

Hãy tự mình thử »

Ví dụ này trình bày cách thêm một mũi tên ở bên trái của chú giải công cụ:

Mũi tên trái

.tooltip .tooltiptext :: sau {& nbsp; nội dung: ""; & nbsp; & nbsp; vị trí: tuyệt đối; & nbsp; & nbsp; top: 50%; & nbsp; Phải: 100%; / * Ở bên trái của tooltip */& nbsp; TIP -TOP: -5px; & nbsp; chiều rộng biên giới: 5px; & nbsp; Kiểu biên giới: Solid; & nbsp; Màu sắc biên giới: minh bạch trong suốt trong suốt;}
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

Result:

Di chuột qua me tocktip văn bảnTooltip text

Hãy tự mình thử »


Ví dụ này trình bày cách thêm một mũi tên ở bên trái của chú giải công cụ:

Mũi tên trái

.tooltip .tooltiptext :: sau {& nbsp; nội dung: ""; & nbsp; & nbsp; vị trí: tuyệt đối; & nbsp; & nbsp; top: 50%; & nbsp; Phải: 100%; / * Ở bên trái của tooltip */& nbsp; TIP -TOP: -5px; & nbsp; chiều rộng biên giới: 5px; & nbsp; Kiểu biên giới: Solid; & nbsp; Màu sắc biên giới: minh bạch trong suốt trong suốt;}

Ví dụ này trình bày cách thêm một mũi tên ở bên phải của chú giải công cụ:
  opacity: 0;
  transition: opacity 1s;
}

Mũi tên bên phải
  opacity: 1;
}

Hãy tự mình thử »