mirror of
https://github.com/primer/css.git
synced 2024-12-18 19:51:37 +03:00
83 lines
4.1 KiB
JavaScript
83 lines
4.1 KiB
JavaScript
|
import React from 'react'
|
||
|
|
import { storiesOf } from '@storybook/react'
|
||
|
|
|
||
|
|
storiesOf('Tooltips', module)
|
||
|
|
.add('tooltipped direction', () => (
|
||
|
|
<div className='p-4'>
|
||
|
|
<span className='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 className='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 className='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 className='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 className='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 className='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 className='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 className='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>
|
||
|
|
))
|
||
|
|
.add('tooltip aligned', () => (
|
||
|
|
<div className='p-4'>
|
||
|
|
<span className='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 className='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 className='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 className='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 className='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 className='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 className='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 className='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>
|
||
|
|
))
|
||
|
|
.add('tootlipped-multiline', () => (
|
||
|
|
<div className='p-6'>
|
||
|
|
<span className='tooltipped tooltipped-multiline tooltipped-s border p-2 mr-2' aria-label='This is the tooltip with multiple lines. This is the tooltip with multiple lines.'>
|
||
|
|
Tooltip with multiple lines
|
||
|
|
</span>
|
||
|
|
<span className='tooltipped tooltipped-multiline tooltipped-sw tooltipped-align-right-2 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>
|
||
|
|
))
|
||
|
|
.add('tootlip no delay', () => (
|
||
|
|
<div className='p-6'>
|
||
|
|
<span className='tooltipped tooltipped-n tooltipped-no-delay border p-2' aria-label='This is a tooltip with no delay.'>
|
||
|
|
Tooltip no delay
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
))
|
||
|
|
.add('tooltip on button', () => (
|
||
|
|
<div className='p-6'>
|
||
|
|
<button className='btn btn-secondary tooltipped tooltipped-n' aria-label='This is the tooltip on a button.'>Button</button>
|
||
|
|
</div>
|
||
|
|
))
|