2.0.0 • Published 2 years ago
@justinribeiro/toggle-tooltip v2.0.0
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 testProperties
| 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 FocusTODO: I suppose I could watch for the change and then add/remove the eventhandlers...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-textis used |
show | show | boolean | "'more info'" | Define the internal button aria-label when an svg icon or other non-textis used |
Methods
| Method | Type | Description |
|---|---|---|
close | (noReFocus?: boolean): void | Close the tooltipoReFocus: Don't refocus to the button (probably because wetabbed 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" |