GNB & 차량 리스트 개선 UX _20250804

kr/assets/js/common.js

@@ -1392,3 +1392,95 @@ function btnActive(selector) {
   const selectedText = selectedValue.next(".coupon-item").find("strong").text();
   $(".coupon-active strong").text(selectedText);
 }
+
+// 동적으로 추가되는 .btn-info 요소를 위한 이벤트
+$(document).on("mouseenter", ".carlist .btn-info", function (e) {
+  // 이미 툴팁이 있다면 제거
+  $(".tooltip").remove();
+
+  const $btn = $(this);
+  const $tooltip = $('<div class="tooltip"></div>');
+
+  // 툴팁 내용 설정
+  const tooltipText = $btn.data("tooltip") || "정보를 확인하세요";
+  console.log("🚀 ~ tooltipText:", $btn.attr("data-tooltip"));
+  $tooltip.html('<div class="tooltip-bubble"><em class="edge"></em>' + tooltipText + "</div>");
+
+  // 툴팁을 .carlist에 추가
+  $(".carlist").append($tooltip);
+
+  // .carlist 요소의 offset 정보 가져오기
+  const $carlist = $(".carlist");
+  const carlistOffset = $carlist.offset();
+  const carlistScrollTop = $carlist.scrollTop();
+  const carlistScrollLeft = $carlist.scrollLeft();
+
+  // 툴팁 위치 계산
+  const tooltipWidth = $tooltip.outerWidth();
+  const tooltipHeight = $tooltip.outerHeight();
+
+  // .carlist 내에서의 상대적 위치 계산
+  let left = e.pageX - carlistOffset.left + carlistScrollLeft - tooltipWidth / 2;
+  let top = e.pageY - carlistOffset.top + carlistScrollTop - tooltipHeight + 70;
+
+  // .carlist 내에서의 경계 체크
+  const carlistWidth = $carlist.width();
+  const carlistHeight = $carlist.height();
+  const padding = 10; // 경계에서의 여백
+
+  // 오른쪽 경계 체크 - 툴팁이 오른쪽으로 넘어가면 경계에 딱 붙게
+  if (left + tooltipWidth > carlistWidth - padding) {
+    left = carlistWidth - tooltipWidth - padding;
+    $(".tooltip").addClass("right");
+    console.log("오른쪽 경계에 딱 붙음");
+  }
+
+  // 왼쪽 경계 체크 - 툴팁이 왼쪽으로 넘어가면 경계에 딱 붙게
+  if (left < padding) {
+    left = padding;
+    $(".tooltip").addClass("left");
+    console.log("왼쪽 경계에 딱 붙음");
+  }
+
+  // 툴팁 위치 설정
+  $tooltip.css({
+    position: "absolute",
+    left: left + "px",
+    top: top + "px",
+    zIndex: 9999,
+  });
+
+  // .edge 요소를 .btn-info 요소 위치로 이동
+  const $edge = $tooltip.find(".edge");
+  const edgeWidth = $edge.outerWidth();
+  const edgeHeight = $edge.outerHeight();
+
+  // .btn-info 요소의 위치 정보 가져오기
+  const btnOffset = $btn.offset();
+  const btnWidth = $btn.outerWidth();
+
+  // .btn-info 요소가 툴팁 내에서의 상대적 위치 계산
+  const btnXInTooltip = btnOffset.left - carlistOffset.left + carlistScrollLeft - left + btnWidth / 2;
+  const btnYInTooltip = btnOffset.top - carlistOffset.top + carlistScrollTop - top;
+
+  // .edge 요소의 위치 설정 (.btn-info 요소 위치 기준)
+  $edge.css({
+    position: "absolute",
+    left: btnXInTooltip - edgeWidth / 2 + "px",
+  });
+
+  // 툴팁 표시
+  $tooltip.fadeIn(200);
+});
+
+$(document).on("mouseleave", ".btn-info", function () {
+  $(".tooltip").fadeOut(200, function () {
+    $(this).remove();
+  });
+});
+
+$(document).on("mouseleave", ".tooltip", function () {
+  $(this).fadeOut(200, function () {
+    $(this).remove();
+  });
+});