PHP언어 웹개발 서버관리 DB관련 모바일 Mac세상 USA에서 살아남기 블로그
Web/Bootstrap2021. 2. 4. 07:16

반응형

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

반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)
Posted by saltdoll
TAG

댓글을 달아 주세요