You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: understanding/21/content-on-hover-or-focus.html
+5-5Lines changed: 5 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -83,21 +83,21 @@ <h2>Examples</h2>
83
83
<sectionclass="example">
84
84
<h3>Example 1: Dismissable Tooltip</h3>
85
85
<figure>
86
-
<imgsrc="https://i.imgur.com/K3k8WYk.png" alt="Screenshot of a button with a mouse pointer over it, and a tooltip displayed below the button" />
87
-
<imgsrc="https://i.imgur.com/i0ndsmP.png" alt="Screenshot of a button with a mouse pointer over it, and no tooltip" />
86
+
<imgsrc="img/button-pointer-tooltip.png" alt="Screenshot of a button with a mouse pointer over it, and a tooltip displayed below the button" />
87
+
<imgsrc="img/button-pointer.png" alt="Screenshot of a button with a mouse pointer over it, and no tooltip" />
88
88
<figcaption>A tooltip is displayed below a LVTF button on hover so as not to obscure the button itself. It does however obscure content below the button (the next red button, called ~comment-zoom-content). To meet the Dismissible requirement, a user can press the Escape key to clear the tooltip without moving the mouse, as demonstrated in the second image.</figcaption>
89
89
</figure>
90
90
<figure>
91
-
<imgsrc="https://i.imgur.com/625Nyod.png" alt="Screenshot of a button with a focus indicator on it, and no tooltip" />
91
+
<imgsrc="img/button-focus-indicator.png" alt="Screenshot of a button with a focus indicator on it, and no tooltip" />
92
92
<figcaption>The button's tooltip also appears on focus and can be removed with the Escape key. The screen shot shows the same LVTF button with focus, but the tooltip has been dismissed and is no longer visible.</figcaption>
93
93
</figure>
94
94
</section>
95
95
96
96
<sectionclass="example">
97
97
<h3>Example 2: Hoverable Tooltip</h3>
98
98
<figure>
99
-
<imgsrc="https://i.imgur.com/9Br0nqM.png" alt="Screenshot of a button with a large mouse pointer over it, and a tooltip displayed below the button which is obscured by the large pointer" />
100
-
<imgsrc="https://i.imgur.com/aa1LTLl.png" alt="Screenshot of a button with a tooltip below it, and a large mouse pointer at the bottom of the tooltip" />
99
+
<imgsrc="img/button-pointer-on-tooltip.png" alt="Screenshot of a button with a large mouse pointer over it, and a tooltip displayed below the button which is obscured by the large pointer" />
100
+
<imgsrc="img/button-pointer-below-tooltip.png" alt="Screenshot of a button with a tooltip below it, and a large mouse pointer at the bottom of the tooltip" />
101
101
<figcaption>A button's tooltip is displayed directly below it on mouse hover which can easily be obscured by a large pointer. The tooltip itself is able to be hovered so the mouse pointer can be moved down to its bottom edge in order to view the tooltip text.</figcaption>
0 commit comments