twitter-bootstrap => 툴팁

비고

툴팁은 작은 팝업 상자처럼 보이는 사용자 인터페이스 요소입니다. 일반적으로 사용자가 포인터를 클릭하지 않고 다른 요소 위로 포인터를 가져 가면 트리거됩니다.

성능상의 이유로 툴팁은 jQuery로 초기화해야합니다. 다음 코드는 DOM의 모든 툴팁을 활성화합니다.

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

포지셔닝 툴팁

기본적으로 툴팁은 요소 위에 나타납니다. data-placement 특성을 사용하여 요소의 위쪽, 아래쪽, 왼쪽 또는 오른쪽에 툴팁의 위치를 설정할 수 있습니다.

<a href="#" data-toggle="tooltip" data-placement="top" title="Top tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Bottom tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Left tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Right tooltip">Hover</a

우리는 또한 data-placement="auto" 를 사용하여 동적으로 툴팁의 방향을 재조정 할 수 있습니다. 다음 예제의 툴팁은 가능한 경우 왼쪽에 툴팁이 표시되고, 그렇지 않으면 오른쪽으로 표시됩니다.

<a href="#" data-toggle="tooltip" data-placement="auto left" title="To the left?">Hover</a

기본 예제

도구 설명을 만들려면 data-toggle="tooltip" 속성과 data-toggle="tooltip" 이 포함 된 HTML 요소의 title 만 추가하면됩니다. 제목 속성은 툴팁 안에 표시되는 텍스트를 지정하는 데 사용됩니다.

<span data-toggle="tooltip" title="Hello world!">Hover over me</span>

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

twitter-bootstrap
툴팁

수색…

비고

포지셔닝 툴팁

기본 예제