# code ตัวอย่างใน /java/popper.htm ใช้แบบ CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltip.js/1.3.0/umd/tooltip.min.js"></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded',function(){
var trigger = document.getElementsByClassName("mybutton")[0];
var instance = new Tooltip(trigger,{title: trigger.getAttribute('data-tooltip'),trigger: "hover",});
});
</script></head><body style="text-align:center;">
<div align="center"><button class="button mybutton" data-tooltip="Please Click Me"> Click Here</button></div>
<script>
var hidden=true;
$(document).ready(function(){
var ref = $('#button-a');
var popup = $('#popup');
popup.hide();
ref.click(function(){
if (hidden) {
popup.show();
var popper = new Popper(ref,popup,{ placement: 'bottom', });
} else {
popup.hide();
}
hidden=!hidden;
});
})
</script>
<style>#popup { display:block;width:90px;height:90px;border: thin solid black;background-color:yellow;} </style>
<div id="popup">ใช้ Popper.js!</div>
<button id="button-a">button</button>
