popover
Version:
Tiny, reusable popover component
113 lines (101 loc) • 3.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Popover Test</title>
<link rel="stylesheet" href="../popover.css">
<link rel="stylesheet" href="../popover-theme.css">
<script src="../popover.built.js"></script>
<style>
body {
font-family: sans-serif;
}
.btn {
padding: 15px;
margin-right: 250px;
margin-bottom: 200px;
}
#corner {
position: absolute;
bottom: 20px;
right: 25px;
margin: 0;
}
</style>
</head>
<body>
<p>
<h2>klaemo/popover</h2>
<ul>
<li>popovers are centered next to their triggering element</li>
<li>they'll be aligned automatically if they'd exceed the window</li>
<li>can be freely styled and templated</li>
</ul>
</p>
<div>
<button id="bottom" class="btn">Bottom</button>
<button id="button" class="btn">Delayed</button>
<button id="right" class="btn">Right</button>
</div>
<div>
<button id="top" class="btn">Top</button>
<button id="left" class="btn">Left</button>
<button id="top-2" class="btn">Top</button>
</div>
<button id="corner" class="btn">Corner</button>
<script>
function closeOnClick() {
popover.el.removeEventListener('click')
popover.el.addEventListener('click', function () {
popover.remove()
})
}
var popover = new Popover({
button: document.querySelector('#right')
})
popover.setContent([
'<p>This content has been set with .setContent()</p>',
'<p>Click anywhere to dismiss popover</p>'
].join('')).render()
closeOnClick()
document.querySelector('#right').addEventListener('click', function (e) {
popover = new Popover({
template: '<div class="popover"><div class="popover-content"><p>this content was supplied as a template string</p></div></div>',
button: e.target
})
// use .show()
popover.show()
closeOnClick()
})
var popover2 = new Popover({
position: 'bottom',
button: document.querySelector('#bottom')
})
popover2.setContent('Cool Popover, dude!').render()
var popover3 = new Popover({
position: 'top',
button: document.querySelector('#top')
})
popover3.setContent('<p>Hello there!</p>').render()
var popover4 = new Popover({
position: 'left',
button: document.querySelector('#left')
})
popover4.setContent('<p>Hello there, <br>I am animated!</p>').render('open')
var popover5 = new Popover({
position: 'top',
button: document.querySelector('#corner')
})
popover5.setContent('<p>I am in the corner and automatically aligned, because I would not fit!</p>').render()
var popover6 = new Popover({
position: 'top',
button: document.querySelector('#top-2')
})
popover6.setContent('<p>I am centered above!</p>').render()
var popover7 = new Popover({
position: 'bottom',
})
popover7.setContent('<p>My button is not specified on initialization</p>').setButton('#button').render()
</script>
</body>
</html>