부트스트랩 팝오버 예제 ( Bootstrap Popover example )
Screen Shot
<!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='popover']").popover();
});
</script>
</head>
<body>
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default" title="Popover title"
data-container="body" data-toggle="popover" data-placement="left"
data-content="Some content in Popover on left">
Popover on left
</button>
<button type="button" class="btn btn-primary" title="Popover title"
data-container="body" data-toggle="popover" data-placement="top"
data-content="Some content in Popover on top">
Popover on top
</button>
<button type="button" class="btn btn-success" title="Popover title"
data-container="body" data-toggle="popover" data-placement="bottom"
data-content="Some content in Popover on bottom">
Popover on bottom
</button>
<button type="button" class="btn btn-warning" title="Popover title"
data-container="body" data-toggle="popover" data-placement="right"
data-content="Some content in Popover on right">
Popover on right
</button>
</div>
</div>
</body>
</html>