Bootstrap Tooltip )


엘리먼트에 마우스를 오버했을때 도움말을 볼 수 있는 부트스트랩의 툴팁 기능.


이 기능을 사용할 때<br />과 같은 new line 을 위한 처리를 위해서 


data-html='true' 를 설정한다


https://getbootstrap.com/docs/3.3/javascript/#tooltips


전체 API 보기



   코드)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- Bootstrap CDN -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
 
<!-- html element -->
<a href='#' rel='tooltip' class='tooltip-graph' data-toggle="tooltip" data-html='true' data-placement='left' title='2주 : 5분<br />1달 : 1시간<br />1달 초과 : 일별'><i class=' fa fa-lg fa-info-circle'></i>&nbsp;기간별 데이터 범위</a>
 
 
<script>
/*
***************************************************************************************************************
#    _                    _         _                                 _                 _  _    _        
#   | |                  | |       | |                               | |               | || |  (_)       
#   | |__    ___    ___  | |_  ___ | |_  _ __  __ _  _ __    ______  | |_  ___    ___  | || |_  _  _ __  
#   | '_ \  / _ \  / _ \ | __|/ __|| __|| '__|/ _` || '_ \  |______| | __|/ _ \  / _ \ | || __|| || '_ \ 
#   | |_) || (_) || (_) || |_ \__ \| |_ | |  | (_| || |_) |          | |_| (_) || (_) || || |_ | || |_) |
#   |_.__/  \___/  \___/  \__||___/ \__||_|   \__,_|| .__/            \__|\___/  \___/ |_| \__||_|| .__/ 
#                                                   | |                                           | |    
#    
***************************************************************************************************************
*/
$("[data-toggle='tooltip']").tooltip();
</script>
cs



   결과)


Posted by SAP (Study And Programming) by serpiko

댓글을 달아 주세요