{"id":336,"date":"2018-12-10T16:49:35","date_gmt":"2018-12-10T16:49:35","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=336"},"modified":"2022-12-16T17:06:05","modified_gmt":"2022-12-16T17:06:05","slug":"tooltips","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/tooltips\/","title":{"raw":"Tooltips","rendered":"Tooltips"},"content":{"raw":"A tooltip is typically used to display some information about its owning element when a user hovers a mouse pointer over or gives keyboard focus to an element. Tooltips might include a definition for a word, perhaps full wording for an acronym or abbreviation, or maybe instructions on how to operate a tool or widget. There are many possibilities.\r\n\r\nTooltips are an enhancement for the default \u201ctitle text\u201d standard with HTML. They provide much more flexibility in the presentation and types of information that can be presented than a standard title text tooltip.\r\n<div class=\"textbox\">\r\n\r\n<strong>WAI-ARIA roles, states, and properties used in a tooltip<\/strong>\r\n\r\n<code><code><code><\/code><\/code><\/code>\r\n<ul>\r\n \t<li>role=\"tooltip\"<\/li>\r\n \t<li>aria-hidden:[true|false]<\/li>\r\n \t<li>aria-live=\"polite\"<\/li>\r\n \t<li>tabindex = [0|-1]<\/li>\r\n<\/ul>\r\n<code><code><\/code><\/code>\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #0000ff;\"><strong>Suggested Reading: <\/strong>For details on constructing accessible tooltips, refer to: <a class=\"external\" href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/tooltip\/\" target=\"_blank\" rel=\"noopener noreferrer\">ARIA Authoring Practices Guide: Tooltips<\/a>.<\/div>\r\nThe following JSFiddle presents a typical tooltip. Review the JavaScript and HTML markup. Test the tooltip presented under the Result tab with ChromeVox to understand how it functions without any accessibility features added. You can work in JSFiddle by clicking \u201cEdit in JSFiddle\u201d, copying the accessibility\/WAI-ARIA code described below to fix the accessibility of the tooltip before completing <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/4-6-activity-6-accessible-tooltips\/\">Activity 6<\/a>\u00a0on the page that follows.\r\n<div style=\"height: 600px; overflow: hidden;\">[h5p id=\"27\"]<\/div>\r\nThe first thing to add to the <code>init()<\/code> function, where the tooltip <code>&lt;span&gt; <\/code>element is defined, are the WAI-ARIA attributes. First, define the tooltip with <code>role=\"tooltip\"<\/code>. Hide the tooltip by default with <code>aria-hidden=\"true\"<\/code>. Also, add a live region with <code>aria-live=\"polite\"<\/code>, so screen readers automatically read the tooltip when it appears. Note, the WAI-ARIA 1.1 best practices recommend using <code>aria-describedby<\/code> within the owning element to reference the content of a tooltip, which does not announce as expected with current versions of Chrome. Instead, we use <code>aria-live<\/code>, which announces correctly across all current browsers.\r\n<div style=\"height: 230px; overflow: hidden;\">[h5p id=\"28\"]<\/div>\r\nNext, add keyboard focus to the element the tooltip belongs to with <code>tabindex=\"0\"<\/code>, and add <code>focus<\/code> to <code>.on('mouseover')<\/code>, so both a mouse hover and keyboard focus open the tooltip.\r\n<div style=\"height: 220px;\">[h5p id=\"29\"]<\/div>\r\nAlso, further down in the owning element\u2019s definition, add <code>aria-hidden=\"false\"<\/code> so the hidden-by-default tooltip becomes visible when the mouse hover or keyboard focus occurs.\r\n<div 200px=\"\">[h5p id=\"31\"]<\/div>\r\nAlso, added here is <code>aria-hidden=\"true\"<\/code> to be sure the tooltip is hidden from screen readers, should a mouseout event close the tooltip, adding it to <code>.on(mouseout)<\/code> chained to the element (<code>$elem<\/code>) definition.\r\n<div 300px=\"\">[h5p id=\"32\"]<\/div>\r\n<h2>Adding Keyboard Operability<\/h2>\r\nWAI-ARIA best practices defines keyboard interaction for a tooltip as follows:\r\n<div>\r\n<div class=\"textbox\">\r\n<h3>Recommended Keyboard Interaction for a Tooltip<\/h3>\r\nTooltip widgets do not receive focus. A hover that contains focusable elements can be made using a non-modal dialog.\r\n<ul>\r\n \t<li>Esc: Dismisses the Tooltip.<\/li>\r\n<\/ul>\r\n<div>\r\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #3c3;\">\r\n\r\n<strong>Note:<\/strong>\r\n<ol>\r\n \t<li>Focus stays on the triggering element while the tooltip is displayed.<\/li>\r\n \t<li>If the tooltip is invoked when the trigger element receives focus, then it is dismissed when it no longer has focus (onBlur). If the tooltip is invoked with mouseIn, then it is dismissed with mouseOut.<\/li>\r\n<\/ol>\r\n<p style=\"text-align: left;\"><a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/tooltip\/#keyboard-interaction-23\">Source: W3C ARIA Authoring Practices Guide<\/a><\/p>\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div><span style=\"text-align: initial; font-size: 1em;\">Keyboard operability for a tooltip or, rather, the owning element is relatively simple. As a keyboard equivalent for the <\/span><code style=\"text-align: initial;\">.on(mouseout)<\/code><span style=\"text-align: initial; font-size: 1em;\"> described above, <\/span><code style=\"text-align: initial;\">.on(blur)<\/code><span style=\"text-align: initial; font-size: 1em;\"> is chained to the <\/span><code style=\"text-align: initial;\">$elem<\/code><span style=\"text-align: initial; font-size: 1em;\"> element and within it <\/span><code style=\"text-align: initial;\">aria-hidden=\"true\"<\/code><span style=\"text-align: initial; font-size: 1em;\"> hides the tooltip again, if the mouse pointer is not over the element.<\/span><\/div>\r\n<\/div>\r\n<div 160px=\"\">[h5p id=\"30\"]<\/div>\r\nAlso, if the Esc key is used, add <code>aria-hidden=\"true\"<\/code> to hide the tooltip, even if the mouse is hovering, or the owning element has focus.\r\n<div 175px=\"\">[h5p id=\"33\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/jUJNMdvs\/noheader-->\r\n<h2>Accessible Tooltip in Action<\/h2>\r\nWatch the following video to see how ChromeVox interacts with a tooltip. The Tab key is used to navigate to the first tooltip, which opens a live region when its content is read aloud. Pressing the Tab key once again, move focus to the text input field, and a second tooltip opens and its content is read aloud. Aim to have the tooltips you update in <a href=\"https:\/\/pressbooks.library.ryerson.ca\/wafd\/chapter\/4-6-activity-6-accessible-tooltips\/\">Activity 6<\/a> on the following page operate and announce like the one in the video.\r\n\r\n<strong>Video: <a href=\"https:\/\/www.youtube.com\/watch?v=aUYNdp20TEE\" rel=\"noopener\">Accessible Tooltips<\/a><\/strong>\r\n\r\n[embed]https:\/\/www.youtube.com\/embed\/aUYNdp20TEE[\/embed]","rendered":"<p>A tooltip is typically used to display some information about its owning element when a user hovers a mouse pointer over or gives keyboard focus to an element. Tooltips might include a definition for a word, perhaps full wording for an acronym or abbreviation, or maybe instructions on how to operate a tool or widget. There are many possibilities.<\/p>\n<p>Tooltips are an enhancement for the default \u201ctitle text\u201d standard with HTML. They provide much more flexibility in the presentation and types of information that can be presented than a standard title text tooltip.<\/p>\n<div class=\"textbox\">\n<p><strong>WAI-ARIA roles, states, and properties used in a tooltip<\/strong><\/p>\n<p><code><code><code><\/code><\/code><\/code><\/p>\n<ul>\n<li>role=&#8221;tooltip&#8221;<\/li>\n<li>aria-hidden:[true|false]<\/li>\n<li>aria-live=&#8221;polite&#8221;<\/li>\n<li>tabindex = [0|-1]<\/li>\n<\/ul>\n<p><code><code><\/code><\/code><\/p>\n<\/div>\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #0000ff;\"><strong>Suggested Reading: <\/strong>For details on constructing accessible tooltips, refer to: <a class=\"external\" href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/tooltip\/\" target=\"_blank\" rel=\"noopener noreferrer\">ARIA Authoring Practices Guide: Tooltips<\/a>.<\/div>\n<p>The following JSFiddle presents a typical tooltip. Review the JavaScript and HTML markup. Test the tooltip presented under the Result tab with ChromeVox to understand how it functions without any accessibility features added. You can work in JSFiddle by clicking \u201cEdit in JSFiddle\u201d, copying the accessibility\/WAI-ARIA code described below to fix the accessibility of the tooltip before completing <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/4-6-activity-6-accessible-tooltips\/\">Activity 6<\/a>\u00a0on the page that follows.<\/p>\n<div style=\"height: 600px; overflow: hidden;\">\n<div id=\"h5p-27\">\n<div class=\"h5p-content\" data-content-id=\"27\"><\/div>\n<\/div>\n<\/div>\n<p>The first thing to add to the <code>init()<\/code> function, where the tooltip <code>&lt;span&gt; <\/code>element is defined, are the WAI-ARIA attributes. First, define the tooltip with <code>role=\"tooltip\"<\/code>. Hide the tooltip by default with <code>aria-hidden=\"true\"<\/code>. Also, add a live region with <code>aria-live=\"polite\"<\/code>, so screen readers automatically read the tooltip when it appears. Note, the WAI-ARIA 1.1 best practices recommend using <code>aria-describedby<\/code> within the owning element to reference the content of a tooltip, which does not announce as expected with current versions of Chrome. Instead, we use <code>aria-live<\/code>, which announces correctly across all current browsers.<\/p>\n<div style=\"height: 230px; overflow: hidden;\">\n<div id=\"h5p-28\">\n<div class=\"h5p-content\" data-content-id=\"28\"><\/div>\n<\/div>\n<\/div>\n<p>Next, add keyboard focus to the element the tooltip belongs to with <code>tabindex=\"0\"<\/code>, and add <code>focus<\/code> to <code>.on('mouseover')<\/code>, so both a mouse hover and keyboard focus open the tooltip.<\/p>\n<div style=\"height: 220px;\">\n<div id=\"h5p-29\">\n<div class=\"h5p-content\" data-content-id=\"29\"><\/div>\n<\/div>\n<\/div>\n<p>Also, further down in the owning element\u2019s definition, add <code>aria-hidden=\"false\"<\/code> so the hidden-by-default tooltip becomes visible when the mouse hover or keyboard focus occurs.<\/p>\n<div>\n<div id=\"h5p-31\">\n<div class=\"h5p-content\" data-content-id=\"31\"><\/div>\n<\/div>\n<\/div>\n<p>Also, added here is <code>aria-hidden=\"true\"<\/code> to be sure the tooltip is hidden from screen readers, should a mouseout event close the tooltip, adding it to <code>.on(mouseout)<\/code> chained to the element (<code>$elem<\/code>) definition.<\/p>\n<div>\n<div id=\"h5p-32\">\n<div class=\"h5p-content\" data-content-id=\"32\"><\/div>\n<\/div>\n<\/div>\n<h2>Adding Keyboard Operability<\/h2>\n<p>WAI-ARIA best practices defines keyboard interaction for a tooltip as follows:<\/p>\n<div>\n<div class=\"textbox\">\n<h3>Recommended Keyboard Interaction for a Tooltip<\/h3>\n<p>Tooltip widgets do not receive focus. A hover that contains focusable elements can be made using a non-modal dialog.<\/p>\n<ul>\n<li>Esc: Dismisses the Tooltip.<\/li>\n<\/ul>\n<div>\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #3c3;\">\n<p><strong>Note:<\/strong><\/p>\n<ol>\n<li>Focus stays on the triggering element while the tooltip is displayed.<\/li>\n<li>If the tooltip is invoked when the trigger element receives focus, then it is dismissed when it no longer has focus (onBlur). If the tooltip is invoked with mouseIn, then it is dismissed with mouseOut.<\/li>\n<\/ol>\n<p style=\"text-align: left;\"><a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/tooltip\/#keyboard-interaction-23\">Source: W3C ARIA Authoring Practices Guide<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div><span style=\"text-align: initial; font-size: 1em;\">Keyboard operability for a tooltip or, rather, the owning element is relatively simple. As a keyboard equivalent for the <\/span><code style=\"text-align: initial;\">.on(mouseout)<\/code><span style=\"text-align: initial; font-size: 1em;\"> described above, <\/span><code style=\"text-align: initial;\">.on(blur)<\/code><span style=\"text-align: initial; font-size: 1em;\"> is chained to the <\/span><code style=\"text-align: initial;\">$elem<\/code><span style=\"text-align: initial; font-size: 1em;\"> element and within it <\/span><code style=\"text-align: initial;\">aria-hidden=\"true\"<\/code><span style=\"text-align: initial; font-size: 1em;\"> hides the tooltip again, if the mouse pointer is not over the element.<\/span><\/div>\n<\/div>\n<div>\n<div id=\"h5p-30\">\n<div class=\"h5p-content\" data-content-id=\"30\"><\/div>\n<\/div>\n<\/div>\n<p>Also, if the Esc key is used, add <code>aria-hidden=\"true\"<\/code> to hide the tooltip, even if the mouse is hovering, or the owning element has focus.<\/p>\n<div>\n<div id=\"h5p-33\">\n<div class=\"h5p-content\" data-content-id=\"33\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/jUJNMdvs\/noheader --><\/p>\n<h2>Accessible Tooltip in Action<\/h2>\n<p>Watch the following video to see how ChromeVox interacts with a tooltip. The Tab key is used to navigate to the first tooltip, which opens a live region when its content is read aloud. Pressing the Tab key once again, move focus to the text input field, and a second tooltip opens and its content is read aloud. Aim to have the tooltips you update in <a href=\"https:\/\/pressbooks.library.ryerson.ca\/wafd\/chapter\/4-6-activity-6-accessible-tooltips\/\">Activity 6<\/a> on the following page operate and announce like the one in the video.<\/p>\n<p><strong>Video: <a href=\"https:\/\/www.youtube.com\/watch?v=aUYNdp20TEE\" rel=\"noopener\">Accessible Tooltips<\/a><\/strong><\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"Accessible Tooltips\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/aUYNdp20TEE?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"author":100,"menu_order":5,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-336","chapter","type-chapter","status-publish","hentry"],"part":33,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/users\/100"}],"version-history":[{"count":79,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/336\/revisions"}],"predecessor-version":[{"id":2007,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/336\/revisions\/2007"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/parts\/33"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/336\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=336"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=336"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=336"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}