Bootstrap를 이용한 마우스 오버시 Tooltip 설명 나오는 예제

Bootstrap에서 마우스를 올릴때, 설명을 나타내는 Tooltip을 이쁘게 뜨게 하는 방법입니다.

 

 

방법은 간단합니다.

툴팁 관련 html 소스와 javascript를 추가해 주면됩니다.

< html >

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

 

<  javascript >

<script>   $(document).ready(function(){     $('[data-toggle="tooltip"]').tooltip();      }); </script>

 

다음과 같이 입력하면, 마우스를 올리때, 툴팁이 뜹니다.

사용되는 js와 css파일들

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 

 

[ Tooptip 예제 ]

상단에 Tooltip

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
<h2>Tooltip</h2>
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>

 

 

참고:

https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp