<span class="toggletip-container">
<button type="button" aria-label="more info" data-toggletip-content="This clarifies whatever needs clarifying">i</button>
<span role="status"></span>
</span>
.toggletip-container {
position: relative;
display: inline-block;
}
/* the bubble element, added inside the toggletip live region */
.toggletip-bubble {
display: inline-block;
position: absolute;
left: 100%;
top: 0;
width: 10em;
padding: 0.5rem;
background: #000;
color: #fff;
}
button {
width: 2em;
height: 2em;
border-radius: 50%;
border: 0;
background: #000;
font-family: serif;
font-weight: bold;
color: #fff;
}
button:focus {
outline: none;
box-shadow: 0 0 0 0.25rem skyBlue;
}
/* boilerplate; nothing really to see here */
html {
font-size: 150%;
font-family: sans-serif;
}
* {
font-size: inherit;
}
(function() {
// Get all the toggletip buttons
var toggletips = document.querySelectorAll('[data-toggletip-content]');
// Iterate over them
Array.prototype.forEach.call(toggletips, function (toggletip) {
// Get the message from the data-content element
var message = toggletip.getAttribute('data-toggletip-content');
// Get the live region element
var liveRegion = toggletip.nextElementSibling;
// Toggle the message
toggletip.addEventListener('click', function () {
liveRegion.innerHTML = '';
window.setTimeout(function() {
liveRegion.innerHTML = '<span class="toggletip-bubble">'+ message +'</span>';
}, 100);
});
// Close on outside click
document.addEventListener('click', function (e) {
if (toggletip !== e.target) {
liveRegion.innerHTML = '';
}
});
// Remove toggletip on ESC
toggletip.addEventListener('keydown', function (e) {
if ((e.keyCode || e.which) === 27)
liveRegion.innerHTML = '';
});
// Remove on blur
toggletip.addEventListener('blur', function (e) {
liveRegion.innerHTML = '';
});
});
}());
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.