1.0.5 • Published 8 years ago

react-glamorous-tooltip

Licence

MIT

Version

1.0.5

Deps

Vulns

Weekly

npm install react-glamorous-tooltip

Using NPM

1 . Require react-glamorous-tooltip after installation

import Tooltip from 'react-glamorous-tooltip'

2 . Include react-glamorous-tooltip component

<Tooltip visible targetElm={this.self} position="bottom" arrow="center" >

</Tooltip>

3 . Using react-glamorous-tooltip component wrap up your tooltip content

<Tooltip visible targetElm={this.self} position="bottom" arrow="center" >
     <p>your Tooltip content</p>
</Tooltip>

Name	Description	Type
`visible`	Defines if the Tooltip is visible or not. Default: false.	Boolean
`targetElm`	target element which you want tooltip to point to	element
`position`	where to position your tooltip.	string, PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
`fallbackPosition`	fallback position of your tooltip when it's offscreen.	string, PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
`arrow`	where to position the arrow of your tooltip.	PropTypes.oneOf([null, 'center', 'top', 'right', 'bottom', 'left'])
`fallbackArrow`	fallback arrow position when tooltip is offscreen.	PropTypes.oneOf([null, 'center', 'top', 'right', 'bottom', 'left'])
`style`	styles apply to your tooltip	object, { style: {}, arrowStyle: {} }
`positionMargin`	positionMargin apply to your tooltip bewteen target element and tooltip	number
`transition`	transition apply to your tooltip	string, Default: 'all'.
`children`	child react element	element

Keywords