Skip to content

Commit

Permalink
v1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
bplok20010 committed Aug 5, 2020
1 parent a4d26f8 commit 9cbc111
Show file tree
Hide file tree
Showing 10 changed files with 288 additions and 18 deletions.
253 changes: 252 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,252 @@
# tooltip
# tooltip

Tooltip组件

## 安装

`npm install --save react-widget-tooltip`


## 使用

[![Edit elated-montalcini-7mici](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/elated-montalcini-7mici?fontsize=14&hidenavigation=1&theme=dark)

```js
import React from "react";
import Tooltip from "react-widget-tooltip";
import "react-widget-tooltip/style";
import "./styles.css";

export default function App() {
return (
<div
className="App"
style={{
padding: 100
}}
>
<Tooltip
title="...Tooltip..."
>
<button>试试</button>
</Trigger>
</div>
);
}

```

### Interfaces

```ts
export interface TooltipProps extends Omit<TriggerProps, "popup" | "defaultPopupVisible" | "popupVisible" | "destroyPopupOnHide" | "action" | "popupTransition" | "adjustPosition"> {
/** 提示文字 */
title?: React.ReactNode | (() => React.ReactNode);
/** 提示框位置,可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom */
placement?: TriggerProps["placement"];
/** 默认是否显隐 */
defaultVisible?: boolean;
/** 用于手动控制浮层显隐,受控 */
visible?: boolean;
/** 触发行为,可选 "click" | "contextMenu" | "focus" | "hover" 可使用数组设置多个触发行为 */
trigger?: TriggerProps["action"];
/** 提示框偏移量 */
offset?: number;
/** 是否显示提示箭头 */
visibleArrow?: boolean;
/** 箭头大小,默认为:6 */
arrowSize?: number;
/** 箭头保持在中间 */
keepArrowAtCenter?: boolean;
/** 关闭后是否销毁 */
destroyTooltipOnHide?: boolean;
/** 提示动画,参考 react-transition-group*/
transition?: TriggerProps["popupTransition"];
/** 显示隐藏的回调 */
onVisibleChange?: (visible: boolean) => void;
}
```

其他参数 [trigger](https://github.com/react-widget/trigger)

### defaultProps
```js
{
prefixCls: "rw-tooltip",
placement: "top",
defaultVisible: false,
visibleArrow: true,
keepArrowAtCenter: false,
destroyTooltipOnHide: true,
arrowSize: 6,
offset: 0,
delay: 100,
trigger: ["hover"],
outsideHideEventName: ["mousedown", "click"],
transition: {
classNames: {
appear: "tooltip-animated",
appearActive: "tooltip-fade-in",
appearDone: "",
enter: "tooltip-animated",
enterActive: "tooltip-fade-in",
enterDone: "",
exit: "tooltip-animated",
exitActive: "tooltip-fade-out",
exitDone: "",
},
timeout: 300,
},
}
```

### 基础样式

```css
.rw-tooltip-root {
position: absolute;
left: 0;
right: 0;
top: 0;
}

.rw-tooltip {
position: absolute;
left: 0;
top: 0;
font-size: 14px;
z-index: 2000;
}

.rw-tooltip-mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0.1;
z-index: 2000;
}

.rw-tooltip-inner {
position: relative;
min-width: 30px;
min-height: 32px;
padding: 6px 8px;
color: #fff;
text-align: left;
text-decoration: none;
word-wrap: break-word;
background-color: rgba(0, 0, 0, 0.9);
border-radius: 2px;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
}

.rw-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;

box-sizing: border-box;
}

.rw-tooltip-placement-top > .rw-tooltip-arrow,
.rw-tooltip-placement-top-left > .rw-tooltip-arrow,
.rw-tooltip-placement-top-right > .rw-tooltip-arrow {
bottom: -5px;
border-width: 5px 5px 0;
border-top-color: rgba(0, 0, 0, 0.9);
}

.rw-tooltip-placement-bottom > .rw-tooltip-arrow,
.rw-tooltip-placement-bottom-left > .rw-tooltip-arrow,
.rw-tooltip-placement-bottom-right > .rw-tooltip-arrow {
top: -5px;
border-width: 0 5px 5px;
border-bottom-color: rgba(0, 0, 0, 0.9);
}

.rw-tooltip-placement-left > .rw-tooltip-arrow,
.rw-tooltip-placement-left-top > .rw-tooltip-arrow,
.rw-tooltip-placement-left-bottom > .rw-tooltip-arrow {
right: -5px;
border-width: 5px 0 5px 5px;
border-left-color: rgba(0, 0, 0, 0.9);
}

.rw-tooltip-placement-right > .rw-tooltip-arrow,
.rw-tooltip-placement-right-top > .rw-tooltip-arrow,
.rw-tooltip-placement-right-bottom > .rw-tooltip-arrow {
left: -5px;
border-width: 5px 5px 5px 0;
border-right-color: rgba(0, 0, 0, 0.9);
}

.rw-tooltip-placement-top-left > .rw-tooltip-arrow,
.rw-tooltip-placement-bottom-left > .rw-tooltip-arrow {
left: 16px;
}

.rw-tooltip-placement-top > .rw-tooltip-arrow,
.rw-tooltip-placement-bottom > .rw-tooltip-arrow {
left: 50%;
margin-left: -5px;
}

.rw-tooltip-placement-top-right > .rw-tooltip-arrow,
.rw-tooltip-placement-bottom-right > .rw-tooltip-arrow {
right: 16px;
}

.rw-tooltip-placement-left-top > .rw-tooltip-arrow,
.rw-tooltip-placement-right-top > .rw-tooltip-arrow {
top: 8px;
}

.rw-tooltip-placement-left > .rw-tooltip-arrow,
.rw-tooltip-placement-right > .rw-tooltip-arrow {
top: 50%;
margin-top: -5px;
}

.rw-tooltip-placement-left-bottom > .rw-tooltip-arrow,
.rw-tooltip-placement-right-bottom > .rw-tooltip-arrow {
bottom: 8px;
}

.tooltip-animated {
animation-duration: 0.3s;
}

.tooltip-fade-in {
animation-name: TooltipFadeIn;
}

.tooltip-fade-out {
animation-name: TooltipFadeOut;
}

@keyframes TooltipFadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}
@keyframes TooltipFadeOut {
from {
opacity: 1;
}

to {
opacity: 0;
}
}

```
7 changes: 7 additions & 0 deletions docs/asset-manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"index.css": "static/css/index.4ca12b27.chunk.css",
"index.js": "static/js/index.4ca12b27.chunk.js",
"runtime-index.js": "static/js/runtime-index.92eae014.js",
"static/js/2.b694e620.chunk.js": "static/js/2.b694e620.chunk.js",
"index.html": "index.html"
}
1 change: 1 addition & 0 deletions docs/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!doctype html><html><head><meta charset="utf-8"/><title>Tooltip</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/><style>.demo{width:80%;margin:100px auto;background:#fff;font-size:12px;overflow:auto}</style><link href="static/css/index.4ca12b27.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime-index.92eae014.js"></script><script src="static/js/2.b694e620.chunk.js"></script><script src="static/js/index.4ca12b27.chunk.js"></script></body></html>
1 change: 1 addition & 0 deletions docs/static/css/index.4ca12b27.chunk.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions docs/static/js/2.b694e620.chunk.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/static/js/index.4ca12b27.chunk.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions docs/static/js/runtime-index.92eae014.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 9cbc111

Please sign in to comment.