툴팁은 사용자가 마우스를 요소 위로 움직일 때 나타나는 작은 팝업창입니다.

툴팁 만들기

툴팁을 만들려면 data-toggle="tooltip" 속성을 요소에 추가합니다.

title속성을 사용하여 툴팁 안에 표시할 텍스트를 지정합니다.

<a href="#" data-toggle="tooltip" title="툴팁입니다!">마우스를 올리세요</a>

** 툴팁은 jQuery로 초기화해야 합니다. 해당 요소를 선택하고 tooltip()메소드를 호출합니다.

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

툴팁 위치 지정하기

기본값은 요소 위에 나타납니다.

data-placement속성을 사용하면 요소의 위, 아래, 왼쪽, 오른쪽에 툴팁의 위치를 설정할 수 있습니다.

<a href="#" data-toggle="tooltip" data-placement="top" title="툴팁입니다!">Top</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="툴팁입니다!">Bottom</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="툴팁입니다!">Left</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="툴팁입니다!">Right</a>