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

Tooltip

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

Tooltip 꾸미기

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

$(function () {
	$('[data-toggle="tooltip"]').tooltip()
})

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

<span data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</span>

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

예제

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap 4</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col">
					<h1>Tooltips</h1>
					<p>
						<span data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</span>
						<span data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</span>
						<span data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</span>
						<span data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</span>
					</p>
				</div>
			</div>
		</div>
		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
		<script>
			$(function () {
				$('[data-toggle="tooltip"]').tooltip()
			})
		</script>
	</body>
</html>