Blog

팝오버

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<script>
$(document).ready(function(){
	$('body').popover({
		selector: '.id-popover',
        title : '아이디',
		trigger: 'click',
        sanitize: false,
	}).on("show.bs.popover", function(e){
		// hide all other popovers
		$('.id-popover').not(e.target).popover("dispose");
		$(".popover").remove();
	});

    $(document).on('click', function(event) {
        var $clicked = $(event.target);

        if ($clicked.closest('.id-popover').length) {
            return;
        } else if ($clicked.closest('.popover').length) {
            event.stopPropagation();
        } else {
            $('.id-popover').popover('hide');
        }
    });
});
</script>

<a href="javascript:void(0);" class="id-popover" data-container="body" data-toggle="popover" data-placement="right" data-html="true" data-content="my_contents">TEXT</a>