[Bootstrap 4] ToolTip
2022. 6. 1. 13:24ㆍJavaScript/Bootstrap
1. ToopTip
a태그에 대해 나타나는 말풍선에 대해 css를 적용할 수 있습니다.
2. ToopTip 주요 css 클래스
주요 css 클래스는 없으며 jQuery 코드를 통해 tooptip 요소로 만들어줍니다.
$(function(){
$("#a1, #a2, #a3, #a4, #a5").tooltip();
});3. ToopTip 기본적인 구성
<script>
$(function(){
$("#a1").tooltip();
});
</script>
<title>Bootstrap 4</title>
</head>
<body>
<div class="container">
<a href="#" title="툴팁예제" data-toggle="tooltip" id="a1">링크</a>
</div>
</body>
</html>
4. ToopTip 말풍선 방향 결정
data-placement 속성을 설정하여 말풍선이 나오는 방향을 설정할 수 있습니다.
<script>
$(function(){
$("#a2, #a3, #a4, #a5").tooltip();
});
</script>
<title>Bootstrap 4</title>
</head>
<body>
<div class="container">
<h3>말풍선 방향 결정</h3>
<div class="text-center">
<a href="#" title="좌측" data-toggle="tooltip" data-placement="left" id="a2">좌측</a><br>
<a href="#" title="우측" data-toggle="tooltip" data-placement="right" id="a3">우측</a><br>
<a href="#" title="위" data-toggle="tooltip" data-placement="top" id="a4">위</a><br>
<a href="#" title="아래" data-toggle="tooltip" data-placement="bottom" id="a5">아래</a><br>
</div>
</div>
</body>
</html>
References
source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/main/ToopTip/src/main/webapp
[인프런] 윤재성의 Bootstrap 4 & 3 Framework Tutorial
'JavaScript > Bootstrap' 카테고리의 다른 글
| [Bootstrap 4] 공통 클래스 1 (border, rounded, float) (0) | 2022.06.02 |
|---|---|
| [Bootstrap 4] PopOver (0) | 2022.06.01 |
| [Bootstrap 4] Modal (0) | 2022.06.01 |
| [Bootstrap 4] 회전목마 (0) | 2022.06.01 |
| [Bootstrap] Custom Input (0) | 2022.05.31 |