Tooltip UI - 툴팁 레이어

간단한 Tooltip layer 구현해보기

웹 서비스시에 많이 사용되는 툴팁에 대해 알아봅니다.

Tooltip Layer

툴팁을 마크업할 시에 접근성을 고려하여 툴팁 타켓(대상)과 툴팁 콘텐츠를 맵핑(연결)시키도록 합니다.

html

<p>Lorem ipsum dolor sit amet, consectetur  <a href="#tooltip--01" class="tooltip">툴팁 레이어 보기</a></p>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quam.</p>
    <p>Lorem ipsum doloisicing elit. Iste, quam.</p>
    <p>Lorem ipsumdipisicing elit. Iste, quam.</p>
    <p>Lorem ipsum dolor sit amet,  Iste, quam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur  elit. Iste, quam.</p>
    <p>Lorem ipsum dolor sit amet.<a href="#tooltip--02" class="tooltip">툴팁 레이어 보기</a></p>
</div>

<div id="tooltip--01" class="tooltip--content">
    <ul>
        <li>축복받은 폴리네의 판타스마, 무기 상자(30일) 100% 할인 쿠폰</li>
        <li>축복받은 폴리네의 카데이라, 방어구 상자(30일) 100% 할인 쿠폰</li>
        <li>축복받은 폴리네의 카데이라, 액세서리 상자(30일) 100% 할인 쿠폰</li>
    </ul>
</div>

<div id="tooltip--02" class="tooltip--content">
    <h2>12주년 응원 수술(영구)</h2>
    <ul>
        <li>공격력/마법력 +12 증가</li>
        <li>액티브 스킬 : 폭죽</li>
    </ul>
</div>

위와 같이 해시값과 ID를 동일하게 맵핑 시켜주도록 합니다.

다음은 간단한 JS 툴팁 코드입니다.

javascript

(function(global, $) {
    /**
     * ---------------------------------------------
     * tooltip layer
     * ---------------------------------------------
     */
    var tooltip = '[class^="tooltip"]';
    $(tooltip).click(function(e){
        return false;
    });
    $('.tooltip').on('mouseenter mouseleave', function(e) {

        var $this = $(this),
            $href = $this.attr('href'),
            $top = $this.offset().top + 22,
            $left = $this.offset().left ;

        var config = {
            tooltipstyle : {
                position : 'absolute',
                top : $top,
                left : $left,
                zIndex: 9999
            }};

        $($href).css(config.tooltipstyle);
        (e.type == 'mouseenter') ? $($href).show() : $($href).hide();
        return false;
    })
})(window, window.jQuery);

Complete Tooltip

Jaehee's e-room