<div class="sample-area" data-tooltip-area>
<h3>Mouse Over Me</h3>
<div class="tooltip" data-tooltip aria-expanded="false" tabindex="0">This is a tooltip.<br>Move your mouse.</div>
</div>
<div class="sample-area" data-tooltip-area>
{% if sampleMode == true %}
<h3>Mouse Over Me</h3>
{% endif %}
<div class="tooltip" data-tooltip aria-expanded="false" tabindex="0">{{content}}</div>
</div>
{
"sampleMode": true,
"content": "This is a tooltip.<br>Move your mouse."
}
// Sample area styles here are for presentational purposes only to
// highlight tooltips functional area. In practice, you should
// be setting your own styles here; the only requirement being that
// your container div be set with a data-tooltip-area attribute
.sample-area {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-top: 100px;
border: 4px dashed color(neutral, light);
width: 100%;
height: 100px;
h3 {
pointer-events: none;
}
}
.tooltip {
@include font-size(14);
position: fixed;
display: block;
border-radius: 5px;
border: 1px solid color(neutral, lighter);
padding: 10px 15px;
background-color: color(neutral, lightest);
pointer-events: none;
opacity: 0;
transform: translateX(10px) translateY(-50%);
transition:
.2s visibility ease-in-out,
.2s opacity ease-in-out;
&::before,
&::after {
position: absolute;
top: 50%;
display: block;
border-right: 0;
transform: translateY(-50%) rotate(45deg);
content: '';
}
&::before {
left: -6px;
width: 10px;
height: 10px;
background-color: inherit;
}
&::after {
z-index: -1;
left: -8px;
width: 12px;
height: 12px;
background-color: color(neutral, lighter);
}
&[aria-expanded='true'],
&:focus {
opacity: 1;
}
&:focus {
position: absolute;
}
}
const wraps = document.querySelectorAll('[data-tooltip-area]');
const tooltips = document.querySelectorAll('[data-tooltip]');
// Mouse variables updated whenever the mouse move
let mouseX = 0;
let mouseY = 0;
for (let i = 0; i < wraps.length; i++) {
const tooltip = wraps[i].querySelector('[data-tooltip]');
tooltips[i].addEventListener('focus', () => {
tooltip.setAttribute('aria-expanded', 'true');
tooltip.setAttribute('style', `top: 0px; left: 0px`);
});
tooltips[i].addEventListener('focusout', () => {
tooltip.setAttribute('aria-expanded', 'false');
});
wraps[i].addEventListener('mouseenter', () => {
tooltip.setAttribute('aria-expanded', 'true');
});
wraps[i].addEventListener('mouseleave', () => {
tooltip.setAttribute('aria-expanded', 'false');
});
wraps[i].addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
tooltip.setAttribute('style', `top: ${mouseY}px; left: ${mouseX}px`);
}, false);
}
A Tooltip is a small information box that appears on hover and provides further information about the respective section.
This tooltip comes with two configuration attributes. The data-tooltip-area attribute should be added to the outer container of the tooltip to track where the tooltip will trigger and move. The data-tooltip attribute should be added to the tooltip content.
aria-expanded set to true. If the tooltip is not visible, aria-expanded is set to false.tabindex="0".Tab = Activate tooltip