Bee-tooltip NPM

bee-tooltip

react bee-tooltip component for tinper-bee.

cz test 0

setup develop environment

$ git clone https://github.com/tinper-bee/bee-tooltip
$ cd bee-tooltip
$ npm install
$ npm run dev

使用

使用单独的tooltip包

组件引入

先进行下载tooltip包

npm install --save bee-tooltip

组件调用

import Tooltip from 'bee-tooltip';
React.render(
    <Tooltip
        onMouseOut={this.handle}
        inverse overlay={tip}>
        <Button colors="primary">
            请拂过我的脸庞
        </Button>
     </Tooltip>, document.getElementById('target'));

样式引入

可以使用link引入dist目录下tooltip.css

<link rel="stylesheet" href="./node_modules/build/Tooltip.css">

可以在js中import样式

import "./node_modules/src/Tooltip.scss"
//或是
import "./node_modules/build/Tooltip.css"

使用tinper-bee组件库

(tinper-bee组件库使用方法)[]

import { Tooltip } from 'tinper-bee';

API

参数	说明	类型	默认值
className	类名	string	-
placement	显示位置(`top` `left` `right` `bottom`)	string	top
inverse	反白显示	bool	false
trigger	触发叠加层的事件	click/hover/focus	hover/focus
delay	叠加层显示和隐藏的延迟时间	number	-
delayShow	叠加层显示的延迟时间	number	-
delayHide	叠加层隐藏的延迟时间	number	-
defaultOverlayShown	覆盖Overlay设置的默认显隐状态	boolean	false
overlay	叠加层	element/string/function	-
onBlur	失去焦点触发的时间	function	-
onClick	点击事件	function	-
onFocus	焦点事件	function	-
onMouseOut	鼠标离开事件	function	-
onMouseOver	鼠标滑过事件	function	-
placement	显示位置设置	top\left\bottom\right	right
rootClose	是否点击除弹出层任意地方隐藏	boolean	true
visible	是否控制弹出层的显示	boolean	-
onVisibleChange	使用控制弹出层显示时的钩子函数	function	-
container	容器	DOM元素/React组件/或者返回React组件的函数	-