[bootstrap] 부트스트랩 – 툴팁(Tooltips), 말풍선

툴팁은 링크에 마우스를 올리면 메시지가 나오는 말풍선을 말합니다. 기본적으로 모든 웹브라우저에서 태그에 title 속성을 적용하면 마우스 오른쪽 아래에 말풍선이 나타나지만 부트스트랩은 보다 세련된 말풍선 효과를 나타낼 수 있습니다.

툴팁은 예외적으로 자바스크립트로 활성화해야 하며 data-toggle=”tooltip” 속성도 포함해야 합니다. 타겟팅을 위해 선택자를 지정해야 하는데 모든 툴팁에는 이 데이터 속성이 있어서 이를 대상으로 선택자를 정합니다. 툴팁으로 나타날 문구는 title 속성이나 data-original-title 속성에 값으로 지정합니다.

<a href=”#” data-toggle=”tooltip” title=”” data-original-title=”Default tooltip“>you probably</a>

 

자바스크립트는 다음과 같이 설정합니다.

$(“[data-toggle=’tooltip’]“).tooltip();

 

툴팁의 위치는 data-placement 속성을 사용합니다. 설정하지 않으면 기본 위치는 상단입니다.

display:none;되고 있는 요소에는 포지션 때문에 사용할 수 없으며 disabled 속성이나 .disabled 선택자가 있는 요소는 div로 감싸고 이곳에 툴팁을 배치하도록 돼 있습니다. 요소의 너비가 넓을 때에는 위에 배치하는 것보다는 왼쪽에 배치하는 게 낫습니다.

<div data-toggle=”tooltip” title=”Disabled” data-placement=”top“>
<input class=”form-control” id=”disabledInput” type=”text” placeholder=”Disabled input here…” disabled>
</div>

 

이미 div가 있을 때에는 해당 div를 사용하면 됩니다.

<div class=”checkbox disabled” data-toggle=”tooltip” title=”Disabled” data-placement=”top“>
<label>
<input type=”checkbox” value=”” disabled>
Option two is disabled
</label>
</div>

 

하지만, 드롭다운처럼 li 태그일 때에는 div로 감쌀 수 없습니다.

 

옵션

data-animation=””의 형태로 데이터 속성을 이용하거나 아래와 같이 자바스크립트를 사용합니다.

$(“[data-toggle=’tooltip’]”).tooltip({ options });
$(“[data-toggle=’tooltip’]”).tooltip({ delay:{“show”:500, “hide”:1000} });

• 
  
• animation : 값은 true(기본) 또는 false이며 툴팁이 페이드 애니메이션되는 것을 결정합니다.
• container : 값은 string 또는 false(기본)이며 툴팁이 나타나야할 콘테이너에 제한하는 기능을 합니다. 화면 크기가 달라지는 경우 툴팁이 벗어나거나 스타일이 제대로 나타나지 않을 수 있는데, 이는 ${container:’body’}로 설정합니다.
• delay : 툴팁이 나타나거나 사라지는 시간을 설정합니다. 단위는 ms로 다음과 같은 형태로 사용하며 show 또는 hide 하나만 사용할 수도 있습니다. 데이타 속성은 data-delay=”{‘show’:500, ‘hide’:1000}”처럼 사용합니다.
• html :값은 true 또는 false(기본)이며 title에 HTML 태그를 추가할 수 있습니다. XXS 공격이 우려될 경우 false로 하고 제이쿼리의 text 메서드를 사용할 수도 있습니다. a 태그를 사용할 경우 url은 작은따옴표를 사용하며 링크를 클릭할 수 있도록 delay를 설정합니다.
• placement : 값으로 top(기본), bottom, left, right, auto가 있으며 auto를 사용할 경우 예를들어 “auto left”로 설정하면 가능하다면 left로 나타나지만 그렇지 않을 경우 right로 나타납니다.
• selector : 자바스크립트로 사용할 경우 “a[rel=tooltip]”처럼 특정 선택자를 지정할 수 있습니다.
• template : 툴팁을 만드는 기본 템플릿입니다. title값이 .tooltip-inner가 있는 div에 입력됩니다. 선택자를 대상으로 스타일을 설정합니다.
• title : 태그에 title 속성이 없을 경우 기본 타이틀을 정할 수 있습니다.
• trigger : “click”, “hover(기본)”, “focus”, “manual”은 툴팁이 나타나게 하는 방법입니다. 각각 클릭했을 때, 마우스를 올렸을 때, 탭 키로 포커스 했을 때, 수동으로 설정했을 때 나타납니다. 두 가지를 사용할 경우 “click focus”와 같이 공백으로 구분합니다.
• viewport : 툴팁이 나타나는 범위를 설정할 수 있습니다.

 

메소드는 4가지가 있으며 destory는 툴팁을 제거합니다.

$(“#element”).tooltip(“show“);
$(“#element”).tooltip(“hide“);
$(“#element”).tooltip(“toggle“);
$(“#element”).tooltip(“destroy“);

 

이벤트는 4가지가 있으며 테스트하려면 delay를 설정해야 합니다. 그렇지 않으면 alert 창을 닫아도 툴팁이 보이지 않습니다.

$(“[data-toggle=’tooltip’]”).tooltip({ delay: {“show”:500, “hide”: 1000} });
$(“[data-toggle=’tooltip’]”).on(“show.bs.tooltip”, function(e) {
alert(“이벤트 실행됨”);
});

• 
  
• show.bs.tooltip : 툴팁이 보이기 전에 이벤트가 실행돼서 alert창이 나타납니다.
• shown.bs.tooltip : 툴팁이 보인 후에 이벤트가 실행됩니다.
• hide.bs.tooltip : 툴팁이 감춰지기 전에 이벤트가 실행됩니다.
• hidden.bs.tooltip : 툴팁이 감춰진 후에 이벤트가 실행됩니다.