npm

npm’s 2019 JavaScript ecosystem survey analysis is now available!Get your copy here »

bee-tooltip

2.1.2 • Public • Published

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

install

npm i bee-tooltip

Downloadsweekly downloads

445

version

2.1.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability