<!-- id는 따로 제어할거 아니면 부여 안해도됨. -->
<div id="tooltip1" class="tooltip" data-tooltip>
    <button type="button" class="tooltip-trigger" data-tooltip-trigger>툴팁 호출</button>
    <div class="tooltip-content" data-tooltip-target>
        툴팁 내용1
        <button type="button" class="tooltip-close" data-tooltip-close><span class="blind">툴팁 닫기</span></button>
    </div>
</div>

Window 클릭해도 닫히지 않는 툴팁 === 다른 툴팁 클릭해도 닫히지 않는 툴팁

마우스오버 툴팁

시점에 따른 이벤트

document.querySelectorAll('[data-tooltip]').forEach(function (el) {
    /* e.target: [data-tooltip] */
    // 열릴 때
    el.addEventListener('tooltip.showing', function (e) {
        console.log(e.target, 'showing');
    })
    // 열린 후
    el.addEventListener('tooltip.shown', function (e) {
        console.log(e.target, 'shown');
    })
    // 닫힐 때
    el.addEventListener('tooltip.hiding', function (e) {
        console.log(e.target, 'hiding');
    })
    // 닫힌 후
    el.addEventListener('tooltip.hidden', function (e) {
        console.log(e.target, 'hidden');
    })
})

Component 호출(feat. 비동기)

const tooltipEl = document.querySelector('#tooltip1');
const tooltip = new SKY.Tooltip(tooltipEl);

show 호출

tooltip.show();

hide 호출

tooltip.hide();