Skip to content

Tooltip component updates #404

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Nov 15, 2017
Merged

Tooltip component updates #404

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fa17932
tweak padding and alignment:
broccolini Nov 15, 2017
562fbd3
remove retina include because isn't needed
broccolini Nov 15, 2017
07a15da
add tooltip alignment options
broccolini Nov 15, 2017
47dee2c
add tooltip stories
broccolini Nov 15, 2017
c0ae6d0
add alignment example to docs
broccolini Nov 15, 2017
73f81d7
add toc, fix heading sizes, and re-org docs
broccolini Nov 15, 2017
18c27bd
remove transparency from tooltips:
broccolini Nov 15, 2017
f7b1ec7
update readme example with caret variations
broccolini Nov 15, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add tooltip stories
  • Loading branch information
@broccolini
broccolini committed Nov 15, 2017
commit 47dee2cdbced7f519c1b8a140a66475677ca1219
82 changes: 82 additions & 0 deletions modules/primer-tooltips/stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
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>
))