An accessible, fast, and WCAG 2.1 compliant toggle style tooltip web component using role=status.
MIT License
A small (8KB), accessible, fast, and WCAG 2.1 compliant toggle style tooltip web component using role=status.
To see the tooltip in action within JAWS 2020, see https://www.youtube.com/watch?v=PNH0RTB9alg
Install the component:
npm i @justinribeiro/toggle-tooltip
# or
yarn add @justinribeiro/toggle-tooltip
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/[email protected]/dist/index.js">
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
.
$ git clone [email protected]:justinribeiro/toggle-tooltip.git
$ cd toggle-tooltip
$ yarn install
$ yarn start
# run the tests
$ yarn test
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-tooltip Note: 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 |
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 |
Name | Description |
---|---|
Default slot injects into button value, useful for icon | |
tooltip |
Any message or links you'd like in the tooltip status message |
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" |