Skip to content

Commit ec460a5

Browse files
committed
udpate readme with caret variations
1 parent d3fcc40 commit ec460a5

File tree

1 file changed

+18
-4
lines changed

1 file changed

+18
-4
lines changed

modules/primer-tooltips/README.md

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -86,17 +86,31 @@ Tooltip classes will conflict with Octicon classes, and as such, must go on a pa
8686

8787
### Align tooltips
8888

89+
Tooltips can be aligned to the left or right of an element, and come with 2 variations for indenting the caret.
90+
8991
```html
90-
<span class="tooltipped tooltipped-ne tooltipped-align-left border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NE and aligned left.">
92+
<span class="tooltipped tooltipped-ne tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NE and aligned left.">
93+
Tooltip North East align left
94+
</span>
95+
<span class="tooltipped tooltipped-ne tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NE and aligned left.">
9196
Tooltip North East align left
9297
</span>
93-
<span class="tooltipped tooltipped-se tooltipped-align-left border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SW and aigned left.">
98+
<span class="tooltipped tooltipped-se tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SW and aigned left.">
99+
Tooltip South East align left
100+
</span>
101+
<span class="tooltipped tooltipped-se tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SW and aigned left.">
94102
Tooltip South East align left
95103
</span>
96-
<span class="tooltipped tooltipped-nw tooltipped-align-right border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NW and aligned right.">
104+
<span class="tooltipped tooltipped-nw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NW and aligned right.">
97105
Tooltip North West align right
98106
</span>
99-
<span class="tooltipped tooltipped-sw tooltipped-align-right border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SE and aligned right.">
107+
<span class="tooltipped tooltipped-nw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NW and aligned right.">
108+
Tooltip North West align right
109+
</span>
110+
<span class="tooltipped tooltipped-sw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SE and aligned right.">
111+
Tooltip South West align right
112+
</span>
113+
<span class="tooltipped tooltipped-sw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SE and aligned right.">
100114
Tooltip South West align right
101115
</span>
102116
```

0 commit comments

Comments
 (0)