[사용 가능한 파라미터]
- triggerText: string (기본: '툴팁제목') - 트리거 버튼 텍스트
- heading: string (기본: '툴팁 타이틀') - 툴팁 헤딩 텍스트
- items: array (기본: ['툴팁 내용 입력']) - 툴팁 리스트 항목 (HTML 가능)
- position: 'left' | 'right' (기본: 'left') - 툴팁 정렬 방향
- anchor: boolean (기본: false) - 부모 요소를 기준점으로 사용할지 여부
- footerContent: string|null (기본: null) - 푸터 영역 HTML 콘텐츠
[사용 예시]
// 기본 사용
< %- include('tooltip.ejs', {
triggerText: '안내',
heading: '제목',
items: ['내용1', '내용2']
}) % >
// 푸터에 버튼 추가
< % const buttonHtml = include(`${_src}/views/components/button/button.ejs`, {
size: 'sm',
variant: 'primary',
text: '신청하기'
}); % >
< %- include('tooltip.ejs', {
triggerText: '광고',
heading: '광고 안내',
items: ['내용'],
footerContent: buttonHtml
}) % >
[anchor 사용 시]
부모에 vits-tooltip-anchor 클래스가 있어야 함.
부모가 position: relative 기준점이 됨.
< div class="vits-tooltip-anchor" >
< %- include('tooltip.ejs', {
triggerText: '안내',
heading: '제목',
items: ['내용'],
anchor: true
}) % >
< /div >
※ 주의: anchor 사용 시 부모 패딩이 있으면
툴팁 위치가 패딩 영역 기준으로 잡힘.
반응형에서는 anchor 대신 기본 모드 권장.