Skip to content

xueyou2000/xy-tooltip

Repository files navigation

IE Chrome Firefox Opera Safari
IE 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

NPM version node version npm download

xy-tooltip

xy-tooltip

提示组件, 封装了xy-trigger增加箭头和配色

安装

# yarn
yarn add xy-tooltip

使用例子

import React from "react";
import ReactDOM from "react-dom";
import Tooltip from "xy-tooltip";
ReactDOM.render(
    <Tooltip popup={<span>Tips: 这是一个按钮</span>}>
        <button>按钮</button>
    </Tooltip>,
    container,
);

API

属性 说明 类型 默认值
visible 是否可视 boolean
defaultVisible 默认是否可视 boolean
children 包裹元素 React.ReactNode
popup 弹出内容 React.ReactNode
popupClassName 弹出内容类名 string
popupAlign 对齐选项 DomAlignOption
offsetSize 偏移距离 number 6
destroyPopupOnHide 是否隐藏时销毁 boolean false
placement 显示方向 PlacementType
onChange 改变是否可视事件 (visible: boolean) => void
action 触发方式 TriggerAction[] ['hover']
mouseDelay 鼠标事件判定延迟 number 300
stretch 是否宽度与目标宽度对齐 boolean
popupClickHide 包裹元素点击是否隐藏 boolean false

PlacementType

"left" | "right" | "top" | "bottom" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight"

TriggerAction

"hover" | "click" | "focus" | "contextMenu"

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-tooltip is released under the MIT license.

About

基于React的tooltip组件

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published