react-glamorous-tooltip

Installation

npm install react-glamorous-tooltip

Usage

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>

Demo

Props

Name	Description	Type	Required
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	✅