<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<div class="btns">
  <button data-tooltip="검색 결과를 표시합니다.">
    <span class="material-symbols-outlined">search</span>
    <span class="material-symbols-outlined">keyboard_arrow_down</span>
  </button>
  <button data-tooltip="검색 결과를 표시합니다." data-tooltip-top>
    <span class="material-symbols-outlined">search</span>
    <span class="material-symbols-outlined">keyboard_arrow_up</span>
  </button>
  <button data-tooltip="검색 결과를 표시합니다." data-tooltip-right>
    <span class="material-symbols-outlined">search</span>
    <span class="material-symbols-outlined">keyboard_arrow_right</span>
  </button>
  <button data-tooltip="검색 결과를 표시합니다." data-tooltip-left>
    <span class="material-symbols-outlined">search</span>
    <span class="material-symbols-outlined">keyboard_arrow_left</span>
  </button>
</div>

body {
  padding: 40px;
}
.btns {
  display: flex;
  gap: 20px;
}
button {
  width: max-content;
  height: 40px;
  padding: 0 12px;
  border: none;
  outline: none;
  border-radius: 6px;
  background-color: royalblue;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  user-select: none;
}
button:hover {
  filter: brightness(1.1);
}
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover {
  z-index: 1;
}
[data-tooltip]::after {
  --gap: 6px;
  content: attr(data-tooltip);
  padding: 6px 10px;
  border-radius: 4px;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  position: absolute;
  top: calc(100% + var(--gap));
  left: 50%;
  transition: opacity 0.3s;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
}
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}
/* TOP */
[data-tooltip][data-tooltip-top]::after {
  top: initial;
  bottom: calc(100% + var(--gap));
  left: 50%;
  right: initial;
  transform: translateX(-50%);
}
/* BOTTOM */
[data-tooltip][data-tooltip-bottom]::after {
  top: calc(100% + var(--gap));
  bottom: initial;
  left: 50%;
  right: initial;
  transform: translateX(-50%);
}
/* RIGHT */
[data-tooltip][data-tooltip-right]::after {
  top: 50%;
  bottom: initial;
  left: calc(100% + var(--gap));
  right: initial;
  transform: translateY(-50%);
}
/* LEFT */
[data-tooltip][data-tooltip-left]::after {
  top: 50%;
  bottom: initial;
  left: initial;
  right: calc(100% + var(--gap));
  transform: translateY(-50%);
}