-
bootstrap tooltipjavascript&html 2022. 7. 12. 13:22728x90반응형
#부트스트랩 툴팁 적용
부트스트랩 css 및 bootstrap.bundle.min.js 필요합니다.
1) a tag
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover overme</a>
2) button
- data-placement : top, left,right,bottom 정보를 넣을 수 있다. 툴팁이 어디에 위치할 것인가를 정한다.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top</button>3) button 태그 입력
- title 에 줄바꿈 (line break) 가 필요할 때 사용한다. (

 코드를 넣으면 된다고 하는데 되진 않는다.)
- data-html="true" 입력 시 태그가 적용된다.
<button type="button" class="btn btn-secondary" data-html="true" data-toggle="tooltip" data-placement="top" title="Tooltip <br>on top"> Tooltip on top</button>
4) css
title 정보가 길어질 경우, css 변경하여 너비를 조정한다.
.tooltip-inner{max-width: none;}
<head> <link href="css/sb-admin-2.css" rel="stylesheet"> <script src="jquery/jquery.min.js"></script> <script src="bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script> $(function () { $('[data-toggle="tooltip"]').tooltip(); }) </script> <style> .tooltip-inner{max-width: none;} </style> </head> <a href="#" data-toggle="tooltip" data-html="true" title="Some tooltip<br>text!">Hover overme</a> <button type="button" class="btn btn-secondary" data-html="true" data-toggle="tooltip" data-placement="top" title="Tooltip<br> on top"> Tooltip on top </button>728x90반응형'javascript&html' 카테고리의 다른 글
자바스크립트 천단위 콤마 입력/제거 (0) 2023.10.20 문자열 공백제거 (0) 2023.10.19 bootstrap datepicker (1) 2023.08.31 javascript 페이지 이동, 새로고침 (0) 2022.08.09 자식창에서 부모창으로 태그 전달 [outerHTML] (0) 2022.06.21