confirm 대체 라이브러리 tooltipster

지난 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>