• 목록

✅ 목표
한 줄로 말줄임 처리 (...)
마우스를 올리면 커스텀 툴팁 박스 표시
스타일도 깔끔하게 ✨

✅ HTML 구조[code]<div class="tooltip-wrapper">
  <div class="ellipsis-1 custom-tooltip" data-tooltip="이 텍스트는 툴팁으로 전체 내용이 나옵니다. 유튜브 제목, 긴 주소 등 활용 가능!">
    이 텍스트는 툴팁으로 전체 내용이 나옵니다. 유튜브 제목, 긴 주소 등 활용 가능!
  </div>
</div>[/code]
✅ CSS 스타일[code].ellipsis-1 {
  display: inline-block;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  position: relative;
}

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

.custom-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translateY(-5px);
  background: #333;
  color: #fff;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  white-space: normal;
  max-width: 400px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.custom-tooltip:hover::after {
  opacity: 1;
}[/code]
✅ 작동 방식
data-tooltip 속성에 전체 내용을 넣습니다.
마우스를 올리면 ::after로 툴팁이 자연스럽게 뜹니다.
텍스트가 잘려도, 툴팁으로 원본 전체를 쉽게 확인할 수 있어요.

💡 확장 아이디어

🎨 1. 이모지 or 아이콘 붙이기
글 앞에 아이콘을 붙여 사용자 시선을 유도하고, 의미도 더 명확하게![code]<div class="ellipsis-1 custom-tooltip" data-tooltip="유튜브 링크입니다.">
  ▶ 유튜브 링크입니다.
</div>[/code]아이콘 예시:
▶ 재생 관련
☘️ 공지/정보
🔗 링크
📝 텍스트 관련
📌 고정된 항목

🖼️ 2. 툴팁 안에 이미지, 링크 넣기
CSS ::after는 텍스트만 가능하므로, 아래처럼 JavaScript 기반 툴팁으로 확장 가능:[code]<!-- 툴팁 안에 이미지 또는 링크 포함 -->
<div class="tooltip-wrapper">
  <div class="ellipsis-1" data-tooltip-html='<img src="thumb.jpg" width="100"><br><a href="#">링크 보기</a>'>
    🎬 영화 예고편: 어벤져스 엔드게임 (2019)
  </div>
</div>[/code]이건 별도 JS 툴팁 라이브러리(Tippy.js, Popper.js 등)나 커스텀 JS로 구현해야 합니다.

✨ 3. 클릭 시 모달로 전체 내용 보기
긴 내용이 툴팁으로 부족하다면, 클릭하면 팝업/모달로 전체 보여주기도 가능!
✅ HTML[code]<div class="ellipsis-1 show-modal" data-fulltext="여기에 전체 긴 내용을 모달로 보여줍니다. 줄바꿈, HTML 포함 가능!">
  📜 긴 공지사항 요약입니다.
</div>[/code]
✅ JavaScript[code]document.querySelectorAll('.show-modal').forEach(el => {
  el.addEventListener('click', () => {
    alert(el.dataset.fulltext); // 실제 구현은 modal로
  });
});[/code]
💡 4. 툴팁 자동 활성화 조건
텍스트가 잘린 경우에만 툴팁 표시:[code]document.querySelectorAll('.ellipsis-1').forEach(el => {
  if (el.scrollWidth > el.clientWidth) {
    el.setAttribute('data-tooltip', el.textContent.trim());
  }
});[/code]
📱 5. 모바일 대응
모바일에서는 hover가 없기 때문에 클릭 시 툴팁처럼 띄우는 UI로 바꿔야 함
예: 긴 텍스트 클릭 시 toast-style 팝업

🎁 6. 툴팁 애니메이션/디자인 예쁘게![code].custom-tooltip::after {
  ...
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-10px);
}

.custom-tooltip:hover::after {
  opacity: 1;
  transform: translateY(-15px);
}[/code]