지난 alertifyjs에 이어서 추천하고 싶은 라이브러리는 tooltipster이다. 삭제의 경우 주의를 요하기 때문에 confirm()를 쓰기 마련인데, 이 때 삭제 버튼의 위치와 별개로 confirm창이 생긴다는 점이 마음에 들지 않았다. 그래서 기존에 쓰던 툴팁에 버튼을 넣어서 써보면 어떨까 하는 생각을 하였다.
<!-- s:부트스트랩 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- e:부트스트랩 -->
<!-- s:tooltipster -->
<link rel="stylesheet" type="text/css" href="https://www.cono.kr/static/lib/tooltipster4.2.7/dist/css/tooltipster.bundle.min.css">
<script type="text/javascript" src="https://www.cono.kr/static/lib/tooltipster4.2.7/dist/js/tooltipster.bundle.min.js"></script>
<!-- e:tooltipster -->
<button type="button" id="delete_btn" class="btn btn-danger" data-seq="52">삭제</button>
<div id="delete_tooltip" style="display:none;">
<button class='btn btn-success' id='confirm_btn'>확인</button>
<button class='btn btn-dark' id='cancel_btn'>취소</button>
</div>
<script>
$('#delete_btn').tooltipster({
trigger: 'custom',
triggerOpen: {
click: true,
tap: true
},
triggerClose: {
click: true,
tap: true,
scroll : true,
},
contentAsHTML: true,
content: $('#delete_tooltip').html(),
contentCloning: false,
interactive: true,
});
$(document).on("click","#confirm_btn",function(){
$('#delete_btn').tooltipster('close');
alert('확인버튼클릭');
});
$(document).on("click","#cancel_btn",function(){
$('#delete_btn').tooltipster('close');
alert('취소버튼클릭');
});
</script>