UNPKG

@n8d/htwoo-patterns

Version:

hTWOo Patterns to setup custom style guide

lab.n8d.studio/htwoo/

n8design/htwoo

65 lines (46 loc) • 2.34 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
--- title: Tooltip Components order: 1 --- # Tooltip Components Tooltips in HTWOO provide contextual information or additional details when a user hovers over or focuses on an element. They appear in a small overlay with a directional arrow indicating the related element. ## Overview Tooltips enhance usability by providing supplementary information without cluttering the interface. They appear on hover or focus states and can be positioned in various ways around the triggering element. ## Positioning Options HTWOO tooltips can be positioned in 12 different ways around the target element: * **Top**: top-left, top-center, top-right * **Right**: right-top, right-center, right-bottom * **Bottom**: bottom-left, bottom-center, bottom-right * **Left**: left-top, left-center, left-bottom ## SCSS Imports **Main Component** **SCSS Partial Location** ## Position Classes The position class determines where the arrow appears and affects the tooltip's placement: * `.top-center`: Arrow on top, centered * `.top-left`: Arrow on top, aligned left * `.top-right`: Arrow on top, aligned right * `.bottom-center`: Arrow on bottom, centered * `.bottom-left`: Arrow on bottom, aligned left * `.bottom-right`: Arrow on bottom, aligned right * `.left-top`: Arrow on left, aligned top * `.left-center`: Arrow on left, centered vertically * `.left-bottom`: Arrow on left, aligned bottom * `.right-top`: Arrow on right, aligned top * `.right-center`: Arrow on right, centered vertically * `.right-bottom`: Arrow on right, aligned bottom ## Accessibility For accessible tooltips, follow these guidelines: * Use `role="tooltip"` on the tooltip element * Connect the tooltip to its trigger using `aria-describedby` on the trigger element * Make tooltips visible on both hover and focus for keyboard navigation * Ensure tooltip content is concise and helpful * Use sufficient color contrast between text and background * Avoid using tooltips for essential information that should be directly visible ## Usage Best Practices * Use tooltips for supplementary information only * Keep tooltip content brief and focused * Position tooltips to avoid obscuring important content * Consider the trigger element's position relative to screen edges * Test tooltip display on touch devices * Ensure tooltips don't interfere with form completion