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