mirror of
https://github.com/primer/css.git
synced 2025-01-05 04:47:21 +03:00
Fix cut off tooltips
This commit is contained in:
simurai
parent
9efb7eef15
commit
30217cf58d
@ -24,71 +24,75 @@ Before adding a tooltip, please consider: Is this information essential and nece
|
||||
## Tooltip direction
|
||||
Specify the direction of a tooltip with north, south, east, and west directions:
|
||||
|
||||
- `.tooltipped-n`
|
||||
- `.tooltipped-ne`
|
||||
- `.tooltipped-e`
|
||||
- `.tooltipped-se`
|
||||
- `.tooltipped-s`
|
||||
- `.tooltipped-sw`
|
||||
- `.tooltipped-w`
|
||||
- `.tooltipped-nw`
|
||||
|
||||
|
||||
```html
|
||||
<span class="tooltipped tooltipped-n border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the North side.">
|
||||
Tooltip North
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-ne border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the North East side.">
|
||||
Tooltip North East
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-e border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the East side.">
|
||||
Tooltip East
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the South East side.">
|
||||
Tooltip South East
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-s border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the South side.">
|
||||
Tooltip South
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-sw border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the South West side.">
|
||||
Tooltip South West
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-w border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the West side.">
|
||||
Tooltip West
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-nw border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the North West side.">
|
||||
Tooltip North West
|
||||
</span>
|
||||
<div class="d-flex flex-justify-center pt-5">
|
||||
<span class="tooltipped tooltipped-nw m-2 p-2 border" aria-label="This is the tooltip on the North West side.">
|
||||
tooltipped-nw
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-n m-2 p-2 border" aria-label="This is the tooltip on the North side.">
|
||||
tooltipped-n
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-ne m-2 p-2 border" aria-label="This is the tooltip on the North East side.">
|
||||
tooltipped-ne
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center">
|
||||
<span class="tooltipped tooltipped-w m-2 p-2 border" aria-label="This is the tooltip on the West side.">
|
||||
tooltipped-w
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-e m-2 p-2 border" aria-label="This is the tooltip on the East side.">
|
||||
tooltipped-e
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center pb-5">
|
||||
<span class="tooltipped tooltipped-sw m-2 p-2 border" aria-label="This is the tooltip on the South West side.">
|
||||
tooltipped-sw
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-s m-2 p-2 border" aria-label="This is the tooltip on the South side.">
|
||||
tooltipped-s
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se m-2 p-2 border" aria-label="This is the tooltip on the South East side.">
|
||||
tooltipped-se
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Tooltip alignment
|
||||
Align tooltips to the left or right of an element, combined with a directional class to specify north or south.
|
||||
Align tooltips to the left or right of an element, combined with a directional class to specify north or south. Use a modifier of `1` or `2` to choose how much the tooltip's arrow is indented.
|
||||
|
||||
```html
|
||||
<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.">
|
||||
Tooltip North East align left 1
|
||||
</span>
|
||||
<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.">
|
||||
Tooltip North East align left 2
|
||||
</span>
|
||||
<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.">
|
||||
Tooltip South East align left 1
|
||||
</span>
|
||||
<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.">
|
||||
Tooltip South East align left 2
|
||||
</span>
|
||||
<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.">
|
||||
Tooltip North West align right 1
|
||||
</span>
|
||||
<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.">
|
||||
Tooltip North West align right 2
|
||||
</span>
|
||||
<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.">
|
||||
Tooltip South West align right 1
|
||||
</span>
|
||||
<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.">
|
||||
Tooltip South West align right 2
|
||||
</span>
|
||||
<div class="d-flex flex-justify-center pt-5">
|
||||
<span class="tooltipped tooltipped-nw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
|
||||
tooltipped-nw tooltipped-align-right-1
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-ne tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
|
||||
tooltipped-ne tooltipped-align-left-1
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center">
|
||||
<span class="tooltipped tooltipped-nw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
|
||||
tooltipped-nw tooltipped-align-right-2
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-ne tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
|
||||
tooltipped-ne tooltipped-align-left-2
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center">
|
||||
<span class="tooltipped tooltipped-sw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
|
||||
tooltipped-sw tooltipped-align-right-1
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped SW and aigned left.">
|
||||
tooltipped-se tooltipped-align-left-1
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center pb-5">
|
||||
<span class="tooltipped tooltipped-sw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
|
||||
tooltipped-sw tooltipped-align-right-2
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped SW and aigned left.">
|
||||
tooltipped-se tooltipped-align-left-2
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Tooltips with multiple lines
|
||||
@ -96,18 +100,21 @@ Use `.tooltipped-multiline` when you have long content. This style has some limi
|
||||
|
||||
|
||||
```html
|
||||
<span class="tooltipped tooltipped-multiline tooltipped-n border p-2" aria-label="This is the tooltip with multiple lines. This is the tooltip with multiple lines.">
|
||||
Tooltip with multiple lines
|
||||
</span>
|
||||
<div class="d-flex flex-justify-center pt-6">
|
||||
<span class="tooltipped tooltipped-n tooltipped-multiline m-2 p-2 border" aria-label="This is the tooltip with multiple lines. This is the tooltip with multiple lines.">
|
||||
tooltipped-multiline
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Tooltips No Delay
|
||||
## Tooltips with no delay
|
||||
|
||||
By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a modifier class you can use to override this. `.tooltipped-no-delay`
|
||||
By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a `.tooltipped-no-delay` modifier class you can use to override this.
|
||||
|
||||
```html
|
||||
<span class="tooltipped tooltipped-n tooltipped-no-delay border p-2" aria-label="This is the tooltip on the no delay side.">
|
||||
Tooltip no delay
|
||||
</span>
|
||||
<div class="d-flex flex-justify-center pt-5">
|
||||
<span class="tooltipped tooltipped-n tooltipped-no-delay m-2 p-2 border" aria-label="This is the tooltip on the no delay side.">
|
||||
tooltipped-no-delay
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user