댓글 목록

부트스트랩4 툴팁(Tooltip)

페이지 정보

작성자 운영자 작성일 18-03-24 14:24 조회 1,488 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

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


4c34e48de08a646fa32f0a163c90eb87_1521963006_4807.png
 

툴팁 만들기


툴팁을 만들려면 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>


댓글목록 0

등록된 댓글이 없습니다.