반응형
* 기본적인 Tooltip
<!DOCTYPE html>
<head>
<title>ollagaza story Tooltip Sample</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="container">
<h3>ollagaza story Tooltip Sample</h3>
<span data-toggle="tooltip" title="Thank you!!">Mouse over</span>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
* Javascript로 title 및 옵션 조정하기
이때 주의할 점은 <span> 태그에서 title값이 없어야 jQuery에서 값을 조정할 수 있다.
<!DOCTYPE html>
<head>
<title>ollagaza story Tooltip Sample</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="container">
<h3>ollagaza story Tooltip Sample</h3>
<span data-toggle="tooltip" title="">Mouse over</span>
</div>
<script>
$('[data-toggle="tooltip"]').tooltip({
html: true,
animated : 'fade',
placement : 'top', // top, bottom, left, right 등으로 조정가능
container: "body",
title: "Thank You!!!"
});
</script>
* 외부 데이터를 tooltip 내용으로 사용하기
<!DOCTYPE html>
<head>
<title>ollagaza story Tooltip Sample</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="container">
<h3>ollagaza story Tooltip Sample</h3>
<span data-toggle="tooltip" title="">Mouse over</span>
</div>
<script>
$('[data-toggle="tooltip"]').tooltip({
html: true,
animated : 'fade',
placement : 'top',
container: "body",
title: function(){
var tooltipView = "";
$.ajax({
type: "POST",
async: false,
url: "/tooltip.asp",
data: { mode : "TOOLTIP", MsgCd : $(this).html() },
success: function(resStr){
tooltipView = "<span style='font-size:15px;'>" + resStr + "</span>";
}
});
return tooltipView
});
</script>
창의 width는 style을 사용하면 됩니다.
* 소스 내용중에 3가지 파일필요
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
bootstrap.min.cssbootstrap.min.jsjquey.min.js반응형