Exercise 1.15 - Content on Hover or Focus
A developer did not like the default tooltip that is offered by browsers and instead used bootstrap's tooltip component. Bootstrap's tooltip component is not by default accessible and they failed to take corrective actions to mitigate the issues.
Because it takes a lot of time and thought to solve the issue, the required code is given below. Basically the trigger of the tooltip is switched from the default that is hover focus into manual and the events are handled manually.
Try to hover the tooltip before and after you paste the code below into the javascript editor to see the difference it makes!
var tooltipTriggerList = Array.from(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map((tooltipTriggerEl) => {
return new bootstrap.Tooltip(tooltipTriggerEl, { trigger: 'manual' });
})
tooltipTriggerList.forEach(tooltipTriggerEl => {
var tooltip = bootstrap.Tooltip.getInstance(tooltipTriggerEl);
tooltipTriggerEl.addEventListener('mouseenter', () => {
tooltip.show();
document.querySelector('.tooltip').addEventListener('mouseleave', () => {
if(
!tooltipTriggerEl.parentElement.querySelector(
`${tooltipTriggerEl.tagName}:hover`
)
) {
tooltip.hide();
}
});
});
tooltipTriggerEl.addEventListener('mouseleave', () => {
if(!document.querySelector('.tooltip:hover')) {
tooltip.hide();
}
});
tooltipTriggerEl.addEventListener('focus', () => {
tooltip.show();
});
tooltipTriggerEl.addEventListener('blur', () => {
tooltip.hide();
});
});
window.addEventListener('keydown', (event) => {
if(event.code === 'Escape') {
tooltipTriggerList.forEach(tooltipTriggerEl => {
bootstrap.Tooltip.getInstance(tooltipTriggerEl).hide();
});
}
});Requirements
Need help?
Show me the solutionLearning Material
- WCAG: https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus
- Related Technique: https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR39
- Bootstrap tooltip options: https://getbootstrap.com/docs/5.0/components/tooltips/#options
Editor
Preview Page
Exercise 1.15 - Content on Hover or Focus
A developer did not like the default tooltip that is offered by browsers and instead used bootstrap's tooltip component. Bootstrap's tooltip component is not by default accessible and they failed to take corrective actions to mitigate the issues.
Because it takes a lot of time and thought to solve the issue, the required code is given below. Basically the trigger of the tooltip is switched from the default that is hover focus into manual and the events are handled manually.
Try to hover the tooltip before and after you paste the code below into the javascript editor to see the difference it makes!
var tooltipTriggerList = Array.from(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map((tooltipTriggerEl) => {
return new bootstrap.Tooltip(tooltipTriggerEl, { trigger: 'manual' });
})
tooltipTriggerList.forEach(tooltipTriggerEl => {
var tooltip = bootstrap.Tooltip.getInstance(tooltipTriggerEl);
tooltipTriggerEl.addEventListener('mouseenter', () => {
tooltip.show();
document.querySelector('.tooltip').addEventListener('mouseleave', () => {
if(
!tooltipTriggerEl.parentElement.querySelector(
`${tooltipTriggerEl.tagName}:hover`
)
) {
tooltip.hide();
}
});
});
tooltipTriggerEl.addEventListener('mouseleave', () => {
if(!document.querySelector('.tooltip:hover')) {
tooltip.hide();
}
});
tooltipTriggerEl.addEventListener('focus', () => {
tooltip.show();
});
tooltipTriggerEl.addEventListener('blur', () => {
tooltip.hide();
});
});
window.addEventListener('keydown', (event) => {
if(event.code === 'Escape') {
tooltipTriggerList.forEach(tooltipTriggerEl => {
bootstrap.Tooltip.getInstance(tooltipTriggerEl).hide();
});
}
});Requirements
Need help?
Show me the solutionLearning Material
- WCAG: https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus
- Related Technique: https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR39
- Bootstrap tooltip options: https://getbootstrap.com/docs/5.0/components/tooltips/#options