부트스트랩 툴팁 예제 ( Bootstrap Tooltip Example )
부트스트랩을 사용하여 툴팁을 표현하는 방법에는 2가지가 있다
<a>, <button> 태그의 속성으로 data-toggle="tooltip" 을 포함하고 jQuery 함수인 tooltip() 을 호출하면 된다.
tooltip()함수는 페이지 로드시에 한번만 호출하면 되므로 ready() 함수의 콜백을 이용하여 호출해주면 된다
ScreenShot
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tootip Test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="jquery-2.1.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
</head>
<body>
<h4>Tooltip examples for anchors</h4>
This is a <a href="#" class="tooltip-test" data-toggle="tooltip"
title="Tooltip on left">
Default Tooltip
</a>.
This is a <a href="#" class="tooltip-test" data-toggle="tooltip"
data-placement="left" title="Tooltip on left">
Tooltip on Left
</a>.
This is a <a href="#" data-toggle="tooltip" data-placement="top"
title="Tooltip on top">
Tooltip on Top
</a>.
This is a <a href="#" data-toggle="tooltip" data-placement="bottom"
title="Tooltip on bottom">
Tooltip on Bottom
</a>.
This is a <a href="#" data-toggle="tooltip" data-placement="right"
title="Tooltip on right">
Tooltip on Right
</a>
<br>
<h4>Tooltip examples for buttons</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip"
title="Tooltip on left">
Default Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
</body>
</html>