react-tooltip

react tooltip component

Screenshot

Usage

Actual directory of tooltip components in the import project, You may use it like this:

import Tooltip from '../src/Tooltip'

const style = {
  width: 180
}
<Tooltip 
  style={style}
  placement='bottom'
  content={ <div>实际乘坐：上海航空FM9317<br/>请按实际乘坐航班办理值机。</div> }
>
  <a href="javascript:;">下</a>
</Tooltip>

Or

import Tooltip from '../src/Tooltip'

<Tooltip 
  placement='bottomLeft'
  content='hello world!'
  arrow = { false }         //不显示箭头
  distance= { 10 }          //tooltip 与触发元素之间的距离
>
  <a href="javascript:;">下左</a>
</Tooltip>

API

Tooltip props

name	type	default	description
placement	String	bottomLeft	tooltip placement location
style	Object		tooltip's style, e.g. { zIndex:10000, width:300, height:100 }
wrapClassName	String		tooltip's wrap custom className
arrow	Boolean	true	Whether to display tooltip's arrow
distance	Number	5	The distance between tooltip and the trigger element
content	React.element || String		Custom tooltip's content
mouseEnterDelay	Number	0	Delay how many seconds visible
mouseLeaveDelay	Number	0.1	Delay how many seconds is not visible

Latest version

1.0.0

License

MIT