toggle-tooltip
A small (8KB), accessible, fast, and WCAG 2.1 compliant toggle style tooltip web component using role=status.
Features
- WCAG 2.1 compliant:
- Fast: no jank repaint (turn on paint flashing in DevTools...nada)
- Screen reader friendly (interaction model allows explicit feedback)
- Supports optional hover (which is also compliant with WCAG 1.4.13)
- Basic styling with CSS custom properties
Demo / Screen Reader
To see the tooltip in action within JAWS 2020, see https://www.youtube.com/watch?v=PNH0RTB9alg
Install with Tools
Install the component:
npm i @justinribeiro/toggle-tooltip
# or
yarn add @justinribeiro/toggle-tooltipInstall with CDN
If you want the paste-and-go version, you can simply load it via CDN:
<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/toggle-tooltip@1.0.3/dist/index.js">Usage
Fire it up:
<script type="module">
import '@justinribeiro/toggle-tooltip/index.js';
</script>
<toggle-tooltip>
ⓘ
<span slot="tooltip">
I'm a tooltip!
</span>
</toggle-tooltip>See other uses in demo/index.html.
Development
$ git clone git@github.com:justinribeiro/toggle-tooltip.git
$ cd toggle-tooltip
$ yarn install
$ yarn start
# run the tests
$ yarn test
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
hover |
hover |
boolean |
false | Setting hover as attribute on component allows for the mouseover andmouseout events to become active for this instance of the toggle-tooltipNote: this mode is complaint with WCAG SC 1.4.13 Content on Hover or Focus TODO: I suppose I could watch for the change and then add/remove the event handlers...but I don't have a use case for the at the moment |
label |
label |
string |
"'more info'" | Define the internal button aria-label when an svg icon or other non-text is used |
show |
show |
boolean |
"'more info'" | Define the internal button aria-label when an svg icon or other non-text is used |
Methods
| Method | Type | Description |
|---|---|---|
close |
(noReFocus?: boolean): void |
Close the tooltip oReFocus: Don't refocus to the button (probably because we tabbed off and are moving through the document) |
open |
(): void |
Open the tooltip and focus to it |
Slots
| Name | Description |
|---|---|
| Default slot injects into button value, useful for icon | |
tooltip |
Any message or links you'd like in the tooltip status message |
CSS Custom Properties
| Property | Default |
|---|---|
--toggle-tooltip-button-background-color |
"transparent" |
--toggle-tooltip-button-border |
"none" |
--toggle-tooltip-button-padding |
0 |
--toggle-tooltip-status-background-color |
"#fafafa" |
--toggle-tooltip-status-border |
"1px solid #ccc" |
--toggle-tooltip-status-border-radius |
"0.5rem" |
--toggle-tooltip-status-box-shadow |
"none" |
--toggle-tooltip-status-padding |
"1rem" |