html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="popper.css">
<script src="popper.js"></script>
<script src="app.js"></script>
</head>
<body>
</body>
</html>
script
// app.js
const trigger = document.getElementById('trigger');
const popover = document.getElementById('popover');
const popper = new Popper(trigger, popover, {
placement: 'top',
modifiers: {
flip: {
enabled: true
},
preventOverflow: {
enabled: true,
boundariesElement: 'window'
}
}
});
trigger.addEventListener('click', () => {
popover.style.display = 'block';
});
document.addEventListener('click', (event) => {
if (!trigger.contains(event.target) && !popover.contains(event.target)) {
popover.style.display = 'none';
}
});
