[javascript] 터치 이벤트를 사용하여 터치한 위치에 툴팁을 표시하는 방법은?

12 Dec 2023

javascript

먼저, HTML과 CSS를 사용하여 툴팁을 디자인하고, JavaScript를 사용하여 터치 이벤트를 처리합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <style>
    .tooltip {
      position: absolute;
      display: none;
      background-color: #000;
      color: #fff;
      padding: 5px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="tooltip" id="tooltip">툴팁 내용</div>

  <script>
    document.addEventListener('touchstart', function(event) {
      var touchX = event.touches[0].clientX;
      var touchY = event.touches[0].clientY;

      var tooltip = document.getElementById('tooltip');
      tooltip.style.left = touchX + 'px';
      tooltip.style.top = touchY + 'px';
      tooltip.style.display = 'block';
    });
  </script>
</body>
</html>

위 예제에서는 touchstart 이벤트를 사용하여 터치한 위치에 툴팁을 표시하고 있습니다. 툴팁의 디자인은 .tooltip 클래스를 사용하여 CSS로 작성되었습니다.

이제 페이지를 터치하면 터치한 위치에 툴팁이 표시될 것입니다.