부트스트랩 tooltip 커스텀

1 개요[ | ]

부트스트랩 tooltip 커스텀
부트스트랩 tooltip 커스터마이징
부트스트랩 tooltip 매뉴얼 설정

2 예시 1[ | ]

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button class="btn btn-default btn-copy">Copy</button>

<script>
  $('.btn-copy').on({
    'click': function() {
      $(this).tooltip({
        trigger: 'manual',
        placement: 'bottom',
        title: 'Copied!'
      }).tooltip('show');
    },
    'mouseleave': function() {
      $(this).tooltip('hide');
    }
  });
</script>

3 예시 2[ | ]

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button class="btn btn-default my-copy">Copy</button>
<div class="my-tooltip tooltip bottom"><div class="tooltip-arrow"></div><div class="tooltip-inner">Copied!</div></div>

<script>
$('.my-copy').click(function() {
	$('.my-tooltip').css('opacity',1).show();
})
.mouseleave(function() {
	$('.my-tooltip').fadeOut('fast');
});
</script>

4 같이 보기[ | ]