1
1
mirror of https://github.com/primer/css.git synced 2024-12-24 06:32:00 +03:00
css/modules/primer-tooltips/stories.js
2017-11-15 12:38:44 -05:00

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>
))