diff --git a/comparisons/components/tooltip/a11y.txt b/comparisons/components/tooltip/a11y.txt new file mode 100644 index 0000000..a20d9c8 --- /dev/null +++ b/comparisons/components/tooltip/a11y.txt @@ -0,0 +1 @@ +Usage: The tooltip trigger must have the aria-describedby attribute, and its value must be a unique id which is given to its associated tooltip. The tooltip itself must have role="tooltip". The tooltip trigger must receive focus by the keyboard, and must trigger the tooltip on hover and focus. The tooltip itself should not recieve focus. It meets most of the guidelines set by the W3C ARIA Authoring Practices. What is missing is the tooltip being dismissed by the Esc key and the trigger on hover being announced by the screenreader. \ No newline at end of file diff --git a/comparisons/components/tooltip/demo.html b/comparisons/components/tooltip/demo.html new file mode 100644 index 0000000..cdfce9a --- /dev/null +++ b/comparisons/components/tooltip/demo.html @@ -0,0 +1,116 @@ + + + + + + + You Might Not Need JavaScript - Tooltip Demo + + + +

Cat ipsum dolor sit amet, + + fall over dead, + (not really but gets sypathy) + + adipisicing elit. Velit repudiandae a link to show tabbing order is not affected Love and coo around boyfriend who purrs and makes the perfect moonlight eyes so I can purr and swat + + the glittery gleaming yarn to him. + (the yarn is from a $125 sweater) + + Cat not kitten around plop down in the middle where everybody walks and claws in your leg. +

+ + \ No newline at end of file diff --git a/comparisons/components/tooltip/html.html b/comparisons/components/tooltip/html.html new file mode 100644 index 0000000..f116ac6 --- /dev/null +++ b/comparisons/components/tooltip/html.html @@ -0,0 +1,6 @@ + + + the text / link / image that has a tooltip + + the actual tooltip + \ No newline at end of file diff --git a/comparisons/components/tooltip/resources.txt b/comparisons/components/tooltip/resources.txt new file mode 100644 index 0000000..88ed963 --- /dev/null +++ b/comparisons/components/tooltip/resources.txt @@ -0,0 +1 @@ +ARIA Authoring Practices: https://www.w3.org/TR/wai-aria-practices-1.1/#tooltip \ No newline at end of file diff --git a/comparisons/components/tooltip/scss.scss b/comparisons/components/tooltip/scss.scss new file mode 100644 index 0000000..3d99a00 --- /dev/null +++ b/comparisons/components/tooltip/scss.scss @@ -0,0 +1,31 @@ +.tooltip__container { + // so the tooltip is always positioned next to its trigger + position: relative; +} + +.tooltip__trigger { + // these two are optional styles, but give the user an indication that the trigger is interactive + border-bottom: 1px dashed; + cursor: help; + + // using the general sibling selector in case someone inserts something like an icon between the two + &:focus ~ [role='tooltip'], + &:hover ~ [role='tooltip'] { + visibility: visible; + // if you used opacity: 0 for the default style + opacity: 1; + } +} + +// these are the only styles needed, and even opacity is not needed if you don't want to fade it in +// the rest would be up to the user to decide on +[role='tooltip'] { + // positioned absolutely to take it out of the normal document flow + position: absolute; + // keeps it hidden from screenreaders until the user focuses the trigger + visibility: hidden; + // prevents a glitch where sometimes hovering over a certain spot makes the tooltip flash in and out rapidly + pointer-events: none; + // opacity will hide it visually but not from screenreaders; allows us to give it a nice fade-in effect since visibiliy cannot be transitioned + opacity: 0; +}