Bootstrap 4 툴팁

툴팁은 사용자가 요소 위로 마우스 포인터를 이동할 때 나타나는 작은 팝업 상자다.

툴팁 만드는 방법

툴팁을 생성하려면 data-toggle=”tooltip” 요소에 속성을 추가한다.

title 속성을 사용하여 툴팁 내부에 표시되어야 하는 텍스트를 지정한다.

예제

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

툴팁은 jQuery를 사용하여 초기화해야 한다.
지정된 요소를 선택하고 tooltip() 메서드를 호출한다.

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

위치 지정 툴팁

기본적으로 도구 설명은 요소 위에 표시된다.

data-placement 속성을 사용하여 요소의 상단, 하단, 왼쪽 또는 오른쪽에 도구 설명 위치를 설정한다.

예제

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기