Uxcore-tooltip NPM

uxcore-tooltip

TL;DR

tooltip ui component for react

setup develop environment

$ git clone https://github.com/uxcore/uxcore-tooltip
$ cd uxcore-tooltip
$ npm install
$ gulp server

Usage

import Tooltip from 'uxcore-tooltip';

ReactDOM.render(
	<Tooltip
		placement="top"
		trigger="hover"
		overlay={title}
		<span>tooltip</span>
	</Tooltip>, document.getElementById('target'));

demo

http://uxcore.github.io/uxcore/components/tooltip/

API

props

参数	类型	默认值	说明
overlayClassName	string	uxcore	additional className added to popup overlay
trigger	string[]	'hover'	which actions cause tooltip shown. enum of 'hover','click','focus'
mouseEnterDelay	number	0	delay time to show when mouse enter.unit: s.
mouseLeaveDelay	number	0.1	delay time to hide when mouse leave.unit: s.
overlayStyle	Object		additional style of overlay node
wrapStyle	Object		additional style of wrap node
prefixCls	String	kuma-tooltip	prefix class name
onVisibleChange	Function		call when visible is changed
visible	boolean		whether tooltip is visible
defaultVisible	boolean		whether tooltip is visible initially
placement	String	Object		one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft',	'bottomRight'] or alignConfig of dom-align
align	Object: alignConfig of dom-align		only valid when placement's type	is String. value will be merged into placement's align config. note: can only accept offset and targetOffset
overlay	React.Element		popup content
getTooltipContainer	function		function returning html node which will act as tooltip contaier