primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-03 15:35:29 +03:00
Code Issues Projects Releases Wiki Activity

Add dot infront of class names

Browse Source 
Seems to be a convention in other examples.
This commit is contained in:
simurai 2019-03-14 10:42:41 +09:00
parent ce47e81b73
commit 9d2bf3e8f9
1 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
pages/css/components/tooltips.md
View File

@ -27,32 +27,32 @@ Specify the direction of a tooltip with north, south, east, and west directions:
```html ```html
<div class="d-flex flex-justify-center pt-5"> <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."> <span class="tooltipped tooltipped-nw m-2 p-2 border" aria-label="This is the tooltip on the North West side.">
tooltipped-nw .tooltipped-nw
</span> </span>
<span class="tooltipped tooltipped-n m-2 p-2 border" aria-label="This is the tooltip on the North side."> <span class="tooltipped tooltipped-n m-2 p-2 border" aria-label="This is the tooltip on the North side.">
tooltipped-n .tooltipped-n
</span> </span>
<span class="tooltipped tooltipped-ne m-2 p-2 border" aria-label="This is the tooltip on the North East side."> <span class="tooltipped tooltipped-ne m-2 p-2 border" aria-label="This is the tooltip on the North East side.">
tooltipped-ne .tooltipped-ne
</span> </span>
</div> </div>
<div class="d-flex flex-justify-center"> <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."> <span class="tooltipped tooltipped-w m-2 p-2 border" aria-label="This is the tooltip on the West side.">
tooltipped-w .tooltipped-w
</span> </span>
<span class="tooltipped tooltipped-e m-2 p-2 border" aria-label="This is the tooltip on the East side."> <span class="tooltipped tooltipped-e m-2 p-2 border" aria-label="This is the tooltip on the East side.">
tooltipped-e .tooltipped-e
</span> </span>
</div> </div>
<div class="d-flex flex-justify-center pb-5"> <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."> <span class="tooltipped tooltipped-sw m-2 p-2 border" aria-label="This is the tooltip on the South West side.">
tooltipped-sw .tooltipped-sw
</span> </span>
<span class="tooltipped tooltipped-s m-2 p-2 border" aria-label="This is the tooltip on the South side."> <span class="tooltipped tooltipped-s m-2 p-2 border" aria-label="This is the tooltip on the South side.">
tooltipped-s .tooltipped-s
</span> </span>
<span class="tooltipped tooltipped-se m-2 p-2 border" aria-label="This is the tooltip on the South East side."> <span class="tooltipped tooltipped-se m-2 p-2 border" aria-label="This is the tooltip on the South East side.">
tooltipped-se .tooltipped-se
</span> </span>
</div> </div>
``` ```
@ -63,34 +63,34 @@ Align tooltips to the left or right of an element, combined with a directional c
```html ```html
<div class="d-flex flex-justify-center pt-5"> <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."> <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 .tooltipped-nw .tooltipped-align-right-1
</span> </span>
<span class="tooltipped tooltipped-ne tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped NE and aligned left."> <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 .tooltipped-ne .tooltipped-align-left-1
</span> </span>
</div> </div>
<div class="d-flex flex-justify-center"> <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."> <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 .tooltipped-nw .tooltipped-align-right-2
</span> </span>
<span class="tooltipped tooltipped-ne tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped NE and aligned left."> <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 .tooltipped-ne .tooltipped-align-left-2
</span> </span>
</div> </div>
<div class="d-flex flex-justify-center"> <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."> <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 .tooltipped-sw .tooltipped-align-right-1
</span> </span>
<span class="tooltipped tooltipped-se tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped SW and aigned left."> <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 .tooltipped-se .tooltipped-align-left-1
</span> </span>
</div> </div>
<div class="d-flex flex-justify-center pb-5"> <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."> <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 .tooltipped-sw .tooltipped-align-right-2
</span> </span>
<span class="tooltipped tooltipped-se tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped SW and aigned left."> <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 .tooltipped-se .tooltipped-align-left-2
</span> </span>
</div> </div>
``` ```
@ -102,7 +102,7 @@ Use `.tooltipped-multiline` when you have long content. This style has some limi
```html ```html
<div class="d-flex flex-justify-center pt-6"> <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."> <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 .tooltipped-multiline
</span> </span>
</div> </div>
``` ```
@ -114,7 +114,7 @@ By default the tooltips have a slight delay before appearing. This is to keep mu
```html ```html
<div class="d-flex flex-justify-center pt-5"> <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."> <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 .tooltipped-no-delay
</span> </span>
</div> </div>
``` ```