CSS-only 툴팁 | DevTemplates

순수 CSS만으로 구현된 상하좌우 4방향 툴팁 컴포넌트입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
  body {
    background: #121212;
    color: white;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 40px;
    margin: 0;
  }
  .tooltip-wrapper {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    background: #333;
    border-radius: 4px;
    cursor: pointer;
  }
  [data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    background: #555;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease;
    z-index: 10;
  }
  [data-tooltip]::after {
    content: "";
    position: absolute;
    border: 5px solid transparent;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease;
    z-index: 10;
  }
  .tooltip-wrapper:hover::before,
  .tooltip-wrapper:hover::after {
    opacity: 1;
    visibility: visible;
  }

  /* Top */
  .top::before { bottom: 100%; left: 50%; transform: translate(-50%, -10px); }
  .top::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-top-color: #555; }

  /* Bottom */
  .bottom::before { top: 100%; left: 50%; transform: translate(-50%, 10px); }
  .bottom::after { top: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: #555; }

  /* Left */
  .left::before { right: 100%; top: 50%; transform: translate(-10px, -50%); }
  .left::after { right: 100%; top: 50%; transform: translateY(-50%); border-left-color: #555; }

  /* Right */
  .right::before { left: 100%; top: 50%; transform: translate(10px, -50%); }
  .right::after { left: 100%; top: 50%; transform: translateY(-50%); border-right-color: #555; }
</style>
</head>
<body>
  <div class="tooltip-wrapper top" data-tooltip="위쪽 툴팁">Top</div>
  <div class="tooltip-wrapper bottom" data-tooltip="아래쪽 툴팁">Bottom</div>
  <div class="tooltip-wrapper left" data-tooltip="왼쪽 툴팁">Left</div>
  <div class="tooltip-wrapper right" data-tooltip="오른쪽 툴팁">Right</div>
</body>
</html>