.button {
  background: blue;
  transition: background 0.4s ease-in-out;
}

.button:hover {
  background: green;
}

<div class="tooltip">
  Hover over me
  <span class="tooltiptext">I'm a tooltip!</span>
</div>

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltiptext {
  visibility: hidden;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  bottom: 125%; /* vị trí tooltip phía trên phần tử */
  left: 50%;
  margin-left: -60px; /* điều chỉnh căn giữa */
  opacity: 0;
  transition: opacity 0.3s;
}

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

.container {
  scroll-snap-type: y mandatory; /* hướng dọc, bắt buộc snap */
  overflow-y: scroll;             /* bật cuộn dọc */
  height: 100vh;                  /* chiều cao bằng viewport */
}

.section {
  scroll-snap-align: start;       /* căn vị trí phần tử */
  height: 100vh;                  /* mỗi phần chiếm 1 màn hình */
}