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组件的函数|-|