본문으로 바로가기

[jQuery] bootstrap tooltip 사용방법

category Dev/jQuery 2016. 9. 13. 15:10

* 기본적인 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.css


bootstrap.min.js


jquey.min.js





댓글을 달아 주세요