Tooltip

특정 대상의 부연 설명을 하기 위한 용도로 사용합니다.

Example

4가지 방향(위, 오른쪽, 아래, 왼쪽)으로 노출합니다. 

<div class="xe-tooltip left" role="tooltip">
    <div class="xe-tooltip-arrow"></div>
    <div class="xe-tooltip-inner">
    Tooltip on the left
    </div>
</div>
<div class="xe-tooltip top" role="tooltip">
    <div class="xe-tooltip-arrow"></div>
    <div class="xe-tooltip-inner">
    Tooltip on the top
    </div>
</div>
<div class="xe-tooltip bottom" role="tooltip">
    <div class="xe-tooltip-arrow"></div>
    <div class="xe-tooltip-inner">
    Tooltip on the bottom
    </div>
</div>
<div class="xe-tooltip right" role="tooltip">
    <div class="xe-tooltip-arrow"></div>
    <div class="xe-tooltip-inner">
    Tooltip on the right
    </div>
</div>

Demo

title 속성을 통해 totltip 내용을 노출합니다. 

<button type="button" class="xe-btn xe-btn-success" data-toggle="xe-tooltip" data-placement="left" title="Tooltip on left">xe-tooltip on left</button>
<button type="button" class="xe-btn xe-btn-success" data-toggle="xe-tooltip" data-placement="top" title="Tooltip on top">xe-tooltip on top</button>
<button type="button" class="xe-btn xe-btn-success" data-toggle="xe-tooltip" data-placement="bottom" title="Tooltip on bottom">xe-tooltip on bottom</button>
<button type="button" class="xe-btn xe-btn-success" data-toggle="xe-tooltip" data-placement="right" title="Tooltip on right">xe-tooltip on right</button>