Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including bee-tooltip with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("prop-types/package.json"); // prop-types is a peer dependency. var beeTooltip = require("bee-tooltip")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

bee-tooltip v2.1.8

bee-tooltip ui component for react

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)stringtop
inverse反白显示boolfalse
trigger触发叠加层的事件click/hover/focushover/focus
delay叠加层显示和隐藏的延迟时间number-
delayShow叠加层显示的延迟时间number-
delayHide叠加层隐藏的延迟时间number-
defaultOverlayShown覆盖Overlay设置的默认显隐状态booleanfalse
overlay叠加层element/string/function-
onBlur失去焦点触发的时间function-
onClick点击事件function-
onFocus焦点事件function-
onMouseOut鼠标离开事件function-
onMouseOver鼠标滑过事件function-
placement显示位置设置top\left\bottom\rightright
rootClose是否点击除弹出层任意地方隐藏booleantrue
visible是否控制弹出层的显示boolean-
onVisibleChange使用控制弹出层显示时的钩子函数function-
container容器DOM元素/React组件/或者返回React组件的函数-
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free