Bootstrap 4 / Tooltips – 마우스 올렸을 때 툴팁 모양 꾸미기

Tooltip

HTML 요소에 title 속성을 추가하면, 요소에 마우스를 올렸을 때 title 속성의 값이 툴팁(Tooltip)으로 나옵니다. 툴팁 모양은 웹브라우저마다 다릅니다. Bootstrap은 툴팁 모양을 통일시키고, 위치를 정할 수 있는 기능을 포함하고 있습니다.

Tooltip 꾸미기

스크립트에 다음 코드를 추가합니다.

다음과 같이 마크업합니다.(span 요소는 예로 들은 것일 뿐, a, button 등 다른 요소에도 사용할 수 있습니다.)

data-placement로 툴팁의 위치를 정합니다. 사용 가능한 값은 top, right, bottom, left입니다.

예제