tooltip component for tinper-bee
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
build
demo
dist
docs
src
test
.gitignore
.npmignore
.travis.yml
HISTORY.md
README.md
changelog.md
index.html
package.json

README.md

bee-tooltip

npm version Build Status Coverage Status

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