Bootstrap - 툴팁: 초보자 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘은 Bootstrap 툴팁의 fascinante 세계로 함께 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 이 여정을 단계별로 안내해 드리겠습니다. 코드를 한 줄도 적어본 적이 없어도 걱정하지 마세요 - 우리는 매우 기본적인 것부터 시작하여 조금씩 올라갈 겁니다. 그러니 커피 한 잔 (또는 여러분의 좋아하는 음료)을 챙기고, 시작해 보세요!

툴팁이란?

이제 구체적인 내용으로 넘어가기 전에, 툴팁이 무엇인지 이해해 보겠습니다. 웹사이트에서 아이콘이나 텍스트에 마우스를 올리면 추가 정보가 나타나는 작은 팝업을 본 적이 있으신가요? 그게 바로 툴팁입니다! 툴팁은 주요 콘텐츠를 복잡하게 만들지 않고 추가적인 문맥이나 설명을 제공해 주는 작은 도우미들입니다.

툴팁 활성화

이제 코드로 손을 더러 만들어 보겠습니다. Bootstrap에서 툴팁을 활성화하는 첫 번째 단계는 매우 간단합니다. 걱정하지 마세요!

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

이 작은 스크립트는 Bootstrap에게 "이 페이지에서 툴팁을 사용하고 싶어!"라고 알립니다. 어둠의 방에서 불을 켜는 것과 같은东西입니다.

툴팁 생성

우리의 첫 번째 툴팁을 만들어 보겠습니다. HTML 요소에 몇 가지 속성을 추가하는 것만으로 충분합니다:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="저는 툴팁이에요!">
나를 호버하라
</button>

이렇게 되고 있습니다:

• Bootstrap의 btn과 btn-secondary 클래스를 사용하여 버튼을 생성하고 있습니다.
• data-toggle="tooltip"는 이 요소에 툴팁을 사용하도록 지정합니다.
• title="저는 툴팁이에요!"는 툴팁에 나타날 텍스트입니다.

이 버튼을 호버할 때 "저는 툴팁이에요!"가 나타납니다. 마법이죠?

링크에 툴팁 추가

툴팁은 버튼만이 아니라 링크에도 추가할 수 있습니다. 링크에 툴팁을 추가해 보겠습니다:

<a href="#" data-toggle="tooltip" title="여기를 클릭하여 어디로 갈 수 있습니다!">이 링크를 호버하라</a>

이 것은 버튼 예제와 같은 방식으로 작동합니다. 링크를 호버할 때 툴팁 메시지가 나타납니다.

커스텀 툴팁

이제 좀 더 화려한 툴팁을 만들어 보겠습니다. 툴팁을 더 흥미롭게 만들 수 있습니다:

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true"
title="<em>툴팁</em> <u>에</u> <b>HTML</b> 사용">
HTML 툴팁을 위해 호버하라
</button>

이 예제에서는 data-html="true"를 추가하여 툴팁에 HTML을 허용합니다. 이제 <em>, <u>, <b>와 같은 태그를 사용하여 툴팁 텍스트를 스타일링할 수 있습니다.

툴팁 위치 조정

툴팁이 요소에 대해 어디에 나타날지 조정할 수 있습니다. 모든 네 가지 위치를 시도해 보겠습니다:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title=" 상단 툴팁">
상단에 툴팁
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title=" 우측 툴팁">
우측에 툴팁
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title=" 하단 툴팁">
하단에 툴팁
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title=" 좌측 툴팁">
좌측에 툴팁
</button>

data-placement 속성은 Bootstrap에게 툴팁의 위치를 지정합니다. 친구에게 사진 촬영 시 어디에 서야 하는지 말하는 것과 같은 것입니다.

HTML을 포함한 툴팁

이전에 툴팁에 HTML을 활성화한 적이 있었습니다. 이제 그걸 한 단계 더 나아가 보겠습니다:

<button type="button" class="btn btn-danger" data-toggle="tooltip" data-html="true"
title="<h3>커스텀 헤더</h3><p>이것은 문단입니다.</p><img src='smiley.gif' alt='웃는 얼굴'>">
놀라움을 위해 호버하라!
</button>

이 툴팁에는 헤더, 문단, 그리고 이미지까지 포함되어 있습니다! 툴팁 안에 있는 작은 웹페이지입니다.

마크업

occasionally, 당신은 툴팁의 구조에 더 많은 제어를 원할 수 있습니다. 그때 커스텀 마크업이 도움이 됩니다:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-template='<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' title="커스텀 툴팁">
커스텀 툴팁 마크업
</button>

이 예제는 data-template 속성을 사용하여 툴팁의 구조를 정의합니다. 이는 집을 사는 대신 직접 짓는 것과 같은 것입니다.

비활성화된 요소에 툴팁

일반적으로 비활성화된 요소는 사용자와의 상호작용을 트리거하지 않습니다. 하지만 약간의 트릭을 사용하여 툴팁을 작동할 수 있습니다:

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="비활성화된 툴팁">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>비활성화된 버튼</button>
</span>

비활성화된 버튼을 감싸는 span을 사용하여 포커스를 받을 수 있게 합니다. 친구가 상단 선반에 닿을 수 없는 것을 도와주는 것과 같은 것입니다!

옵션

마지막으로, 툴팁을 더욱 커스터마이징할 수 있는 몇 가지 옵션을 살펴보겠습니다:

옵션	유형	기본값	설명
animation	boolean	true	툴팁에 CSS.fade 트랜지션 적용
container	string | false	false	툴팁을 특정 요소에 추가
delay	number | object	0	툴팁 표시 및 숨김 지연 시간 (ms)
html	boolean	false	툴팁에 HTML 허용
placement	string | function	'top'	툴팁 위치 지정
selector	string	false	선택자가 제공되면, 지정된 대상에 대한 툴팁 객체委託
template	string	<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>	툴팁을 생성할 때 사용할 기본 HTML
title	string | element | function	''	title 속성이 없을 때 기본 제목 값
trigger	string	'hover focus'	툴팁 트리거 방법 - click | hover | focus | manual

이러한 옵션을 사용하여 툴팁을 초기화할 수 있습니다:

$('#example').tooltip({
animation: false,
delay: { "show": 500, "hide": 100 },
placement: 'right'
});

이 코드는 fade 애니메이션을 끄고, 표시 및 숨김 지연 시간을 추가하고, 툴팁을 오른쪽에 위치시킵니다.

이제 Bootstrap 툴팁의 세계로 첫 걸음을 뗀 것입니다. 이를 습득하는 열쇠는 연습입니다. 웹페이지를 만들고 다양한 종류의 툴팁을 추가해 보세요. 옵션을 실험하고 무엇을 만들 수 있는지 보세요.

그러면 얼마 지나지 않아 툴팁 마스터가 될 것입니다. 여러분의 웹페이지는 정보가 풍부하고 상호작용이 가능해질 것입니다! 즐거운 코딩을 하고, 과정을 즐기세요!

Credits: Image by storyset