1
This commit is contained in:
+21
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
||||
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
+136
@@ -0,0 +1,136 @@
|
||||
# @rc-component/tooltip
|
||||
|
||||
React Tooltip
|
||||
|
||||
[![NPM version][npm-image]][npm-url]
|
||||
[![npm download][download-image]][download-url]
|
||||
[![build status][github-actions-image]][github-actions-url]
|
||||
[![Codecov][codecov-image]][codecov-url]
|
||||
[![bundle size][bundlephobia-image]][bundlephobia-url]
|
||||
[![dumi][dumi-image]][dumi-url]
|
||||
|
||||
[npm-image]: http://img.shields.io/npm/v/@rc-component/tooltip.svg?style=flat-square
|
||||
[npm-url]: http://npmjs.org/package/@rc-component/tooltip
|
||||
[github-actions-image]: https://github.com/react-component/tooltip/actions/workflows/react-component-ci.yml/badge.svg
|
||||
[github-actions-url]: https://github.com/react-component/tooltip/actions/workflows/react-component-ci.yml
|
||||
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/tooltip/master.svg?style=flat-square
|
||||
[codecov-url]: https://app.codecov.io/gh/react-component/tooltip
|
||||
[download-image]: https://img.shields.io/npm/dm/@rc-component/tooltip.svg?style=flat-square
|
||||
[download-url]: https://npmjs.org/package/@rc-component/tooltip
|
||||
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/tooltip
|
||||
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/tooltip
|
||||
[dumi-url]: https://github.com/umijs/dumi
|
||||
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
|
||||
|
||||
## Screenshot
|
||||
|
||||
<img src="https://gtms03.alicdn.com/tps/i3/TB1NQUSHpXXXXaUXFXXlQqyZXXX-1312-572.png" width="600"/>
|
||||
|
||||
## Browsers support
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
|
||||
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| IE 8 + ✔ | Firefox 31.0+ ✔ | Chrome 31.0+ ✔ | Safari 7.0+ ✔ | Opera 30.0+ ✔ |
|
||||
|
||||
## Install
|
||||
|
||||
[](https://npmjs.org/package/@rc-component/tooltip)
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
var Tooltip = require('@rc-component/tooltip');
|
||||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
|
||||
// By default, the tooltip has no style.
|
||||
// Consider importing the stylesheet it comes with:
|
||||
// '@rc-component/tooltip/assets/bootstrap_white.css'
|
||||
|
||||
ReactDOM.render(
|
||||
<Tooltip placement="left" trigger={['click']} overlay={<span>tooltip</span>}>
|
||||
<a href="#">hover</a>
|
||||
</Tooltip>,
|
||||
container,
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
`npm start` and then go to
|
||||
<http://localhost:8000/demo>
|
||||
|
||||
Online demo: https://tooltip-react-component.vercel.app/
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default | description |
|
||||
| ------------------- | ------------------------------------------------------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| trigger | string \| string\[] | 'hover' | which actions cause tooltip shown. enum of 'hover','click','focus' |
|
||||
| visible | boolean | false | whether tooltip is visible |
|
||||
| defaultVisible | boolean | false | whether tooltip is visible by default |
|
||||
| placement | string | 'right' | tooltip placement. enum of 'top','left','right','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom' |
|
||||
| motion | object | | Config popup motion. Please ref demo for example |
|
||||
| onVisibleChange | (visible: boolean) => void; | | Callback when visible change |
|
||||
| afterVisibleChange | (visible: boolean) => void; | | Callback after visible change |
|
||||
| overlay | ReactNode \| () => ReactNode | | tooltip overlay content |
|
||||
| overlayStyle | object | | deprecated, Please use `styles={{ root: {} }}` |
|
||||
| overlayClassName | string | | deprecated, Please use `classNames={{ root: {} }}` |
|
||||
| prefixCls | string | 'rc-tooltip' | prefix class name of tooltip |
|
||||
| mouseEnterDelay | number | 0 | delay time (in second) before tooltip shows when mouse enter |
|
||||
| mouseLeaveDelay | number | 0.1 | delay time (in second) before tooltip hides when mouse leave |
|
||||
| getTooltipContainer | (triggerNode: HTMLElement) => HTMLElement | () => document.body | get container of tooltip, default to body |
|
||||
| destroyOnHidden | boolean | false | destroy tooltip when it is hidden |
|
||||
| align | object | | align config of tooltip. Please ref demo for usage example |
|
||||
| showArrow | boolean \| object | false | whether to show arrow of tooltip |
|
||||
| zIndex | number | | config popup tooltip zIndex |
|
||||
| classNames | classNames?: { root?: string; container?: string;}; | | Semantic DOM class |
|
||||
| styles | styles?: {root?: React.CSSProperties;container?: React.CSSProperties;}; | | Semantic DOM styles |
|
||||
|
||||
## Important Note
|
||||
|
||||
`Tooltip` requires a child node that accepts an `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` event. This means the child node must be a built-in component like `div` or `span`, or a custom component that passes its props to its built-in component child.
|
||||
|
||||
## Accessibility
|
||||
|
||||
For accessibility purpose you can use the `id` prop to link your tooltip with another element. For example attaching it to an input element:
|
||||
|
||||
```js
|
||||
<Tooltip
|
||||
...
|
||||
id={this.props.name}>
|
||||
<input type="text"
|
||||
...
|
||||
aria-describedby={this.props.name}/>
|
||||
</Tooltip>
|
||||
```
|
||||
|
||||
If you do it like this, a screenreader would read the content of your tooltip if you focus the input element.
|
||||
|
||||
**NOTE:** `role="tooltip"` is also added to expose the purpose of the tooltip element to a screenreader.
|
||||
|
||||
## Development
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## Test Case
|
||||
|
||||
```bash
|
||||
npm test
|
||||
npm run chrome-test
|
||||
```
|
||||
|
||||
## Coverage
|
||||
|
||||
```bash
|
||||
npm run coverage
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
`@rc-component/tooltip` is released under the MIT license.
|
||||
+174
@@ -0,0 +1,174 @@
|
||||
.rc-tooltip.rc-tooltip-zoom-appear,
|
||||
.rc-tooltip.rc-tooltip-zoom-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
.rc-tooltip.rc-tooltip-zoom-enter,
|
||||
.rc-tooltip.rc-tooltip-zoom-leave {
|
||||
display: block;
|
||||
}
|
||||
.rc-tooltip-zoom-enter,
|
||||
.rc-tooltip-zoom-appear {
|
||||
opacity: 0;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.rc-tooltip-zoom-leave {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active,
|
||||
.rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active {
|
||||
animation-name: rcToolTipZoomIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
|
||||
animation-name: rcToolTipZoomOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
@keyframes rcToolTipZoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
@keyframes rcToolTipZoomOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
.rc-tooltip {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.rc-tooltip-hidden {
|
||||
display: none;
|
||||
}
|
||||
.rc-tooltip-placement-top,
|
||||
.rc-tooltip-placement-topLeft,
|
||||
.rc-tooltip-placement-topRight {
|
||||
padding: 5px 0 9px 0;
|
||||
}
|
||||
.rc-tooltip-placement-right,
|
||||
.rc-tooltip-placement-rightTop,
|
||||
.rc-tooltip-placement-rightBottom {
|
||||
padding: 0 5px 0 9px;
|
||||
}
|
||||
.rc-tooltip-placement-bottom,
|
||||
.rc-tooltip-placement-bottomLeft,
|
||||
.rc-tooltip-placement-bottomRight {
|
||||
padding: 9px 0 5px 0;
|
||||
}
|
||||
.rc-tooltip-placement-left,
|
||||
.rc-tooltip-placement-leftTop,
|
||||
.rc-tooltip-placement-leftBottom {
|
||||
padding: 0 9px 0 5px;
|
||||
}
|
||||
.rc-tooltip-inner {
|
||||
padding: 8px 10px;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
background-color: #373737;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
|
||||
min-height: 34px;
|
||||
}
|
||||
.rc-tooltip-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
.rc-tooltip-placement-top .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-topRight .rc-tooltip-arrow {
|
||||
bottom: 4px;
|
||||
margin-left: -5px;
|
||||
border-width: 5px 5px 0;
|
||||
border-top-color: #373737;
|
||||
}
|
||||
.rc-tooltip-placement-top .rc-tooltip-arrow {
|
||||
left: 50%;
|
||||
}
|
||||
.rc-tooltip-placement-topLeft .rc-tooltip-arrow {
|
||||
left: 15%;
|
||||
}
|
||||
.rc-tooltip-placement-topRight .rc-tooltip-arrow {
|
||||
right: 15%;
|
||||
}
|
||||
.rc-tooltip-placement-right .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
|
||||
left: 4px;
|
||||
margin-top: -5px;
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-right-color: #373737;
|
||||
}
|
||||
.rc-tooltip-placement-right .rc-tooltip-arrow {
|
||||
top: 50%;
|
||||
}
|
||||
.rc-tooltip-placement-rightTop .rc-tooltip-arrow {
|
||||
top: 15%;
|
||||
margin-top: 0;
|
||||
}
|
||||
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
|
||||
bottom: 15%;
|
||||
}
|
||||
.rc-tooltip-placement-left .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
|
||||
right: 4px;
|
||||
margin-top: -5px;
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-left-color: #373737;
|
||||
}
|
||||
.rc-tooltip-placement-left .rc-tooltip-arrow {
|
||||
top: 50%;
|
||||
}
|
||||
.rc-tooltip-placement-leftTop .rc-tooltip-arrow {
|
||||
top: 15%;
|
||||
margin-top: 0;
|
||||
}
|
||||
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
|
||||
bottom: 15%;
|
||||
}
|
||||
.rc-tooltip-placement-bottom .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
|
||||
top: 4px;
|
||||
margin-left: -5px;
|
||||
border-width: 0 5px 5px;
|
||||
border-bottom-color: #373737;
|
||||
}
|
||||
.rc-tooltip-placement-bottom .rc-tooltip-arrow {
|
||||
left: 50%;
|
||||
}
|
||||
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
|
||||
left: 15%;
|
||||
}
|
||||
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
|
||||
right: 15%;
|
||||
}
|
||||
+164
@@ -0,0 +1,164 @@
|
||||
@import "./boostrap/anim.less";
|
||||
|
||||
@tooltip-prefix-cls: rc-tooltip;
|
||||
|
||||
//
|
||||
// Tooltips
|
||||
// --------------------------------------------------
|
||||
@font-size-base : 12px;
|
||||
@line-height-base : 1.5;
|
||||
@border-radius-base : 6px;
|
||||
@overlay-shadow : 0 0 4px rgba(0, 0, 0, 0.17);
|
||||
//** Tooltip text color
|
||||
@tooltip-color: #fff;
|
||||
//** Tooltip background color
|
||||
@tooltip-bg: #373737;
|
||||
@tooltip-opacity: 0.9;
|
||||
|
||||
//** Tooltip arrow width
|
||||
@tooltip-arrow-width: 5px;
|
||||
//** Tooltip distance with trigger
|
||||
@tooltip-distance: @tooltip-arrow-width + 4;
|
||||
//** Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
|
||||
// Base class
|
||||
.@{tooltip-prefix-cls} {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
// remove left/top by yiminghe
|
||||
// left: -9999px;
|
||||
// top: -9999px;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
opacity: @tooltip-opacity;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-placement-top, &-placement-topLeft, &-placement-topRight {
|
||||
padding: @tooltip-arrow-width 0 @tooltip-distance 0;
|
||||
}
|
||||
&-placement-right, &-placement-rightTop, &-placement-rightBottom {
|
||||
padding: 0 @tooltip-arrow-width 0 @tooltip-distance;
|
||||
}
|
||||
&-placement-bottom, &-placement-bottomLeft, &-placement-bottomRight {
|
||||
padding: @tooltip-distance 0 @tooltip-arrow-width 0;
|
||||
}
|
||||
&-placement-left, &-placement-leftTop, &-placement-leftBottom {
|
||||
padding: 0 @tooltip-distance 0 @tooltip-arrow-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.@{tooltip-prefix-cls}-inner {
|
||||
padding: 8px 10px;
|
||||
color: @tooltip-color;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @overlay-shadow;
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
// Arrows
|
||||
.@{tooltip-prefix-cls}-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.@{tooltip-prefix-cls} {
|
||||
&-placement-top &-arrow,
|
||||
&-placement-topLeft &-arrow,
|
||||
&-placement-topRight &-arrow {
|
||||
bottom: @tooltip-distance - @tooltip-arrow-width;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-top-color: @tooltip-arrow-color;
|
||||
}
|
||||
|
||||
&-placement-top &-arrow {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&-placement-topLeft &-arrow {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
&-placement-topRight &-arrow {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
&-placement-right &-arrow,
|
||||
&-placement-rightTop &-arrow,
|
||||
&-placement-rightBottom &-arrow {
|
||||
left: @tooltip-distance - @tooltip-arrow-width;
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-right-color: @tooltip-arrow-color;
|
||||
}
|
||||
|
||||
&-placement-right &-arrow {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
&-placement-rightTop &-arrow {
|
||||
top: 15%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&-placement-rightBottom &-arrow {
|
||||
bottom: 15%;
|
||||
}
|
||||
|
||||
&-placement-left &-arrow,
|
||||
&-placement-leftTop &-arrow,
|
||||
&-placement-leftBottom &-arrow {
|
||||
right: @tooltip-distance - @tooltip-arrow-width;
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-left-color: @tooltip-arrow-color;
|
||||
}
|
||||
|
||||
&-placement-left &-arrow {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
&-placement-leftTop &-arrow {
|
||||
top: 15%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&-placement-leftBottom &-arrow {
|
||||
bottom: 15%;
|
||||
}
|
||||
|
||||
&-placement-bottom &-arrow,
|
||||
&-placement-bottomLeft &-arrow,
|
||||
&-placement-bottomRight &-arrow {
|
||||
top: @tooltip-distance - @tooltip-arrow-width;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-bottom-color: @tooltip-arrow-color;
|
||||
}
|
||||
|
||||
&-placement-bottom &-arrow {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&-placement-bottomLeft &-arrow {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
&-placement-bottomRight &-arrow {
|
||||
right: 15%;
|
||||
}
|
||||
}
|
||||
|
||||
+191
@@ -0,0 +1,191 @@
|
||||
.rc-tooltip.rc-tooltip-zoom-appear,
|
||||
.rc-tooltip.rc-tooltip-zoom-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
.rc-tooltip.rc-tooltip-zoom-enter,
|
||||
.rc-tooltip.rc-tooltip-zoom-leave {
|
||||
display: block;
|
||||
}
|
||||
.rc-tooltip-zoom-enter,
|
||||
.rc-tooltip-zoom-appear {
|
||||
opacity: 0;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.rc-tooltip-zoom-leave {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active,
|
||||
.rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active {
|
||||
animation-name: rcToolTipZoomIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
|
||||
animation-name: rcToolTipZoomOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
@keyframes rcToolTipZoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
@keyframes rcToolTipZoomOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
.rc-tooltip {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
line-height: 1.5;
|
||||
font-size: 12px;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
padding: 1px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.rc-tooltip-hidden {
|
||||
display: none;
|
||||
}
|
||||
.rc-tooltip-inner {
|
||||
padding: 8px 10px;
|
||||
color: #333333;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
background-color: #ffffff;
|
||||
border-radius: 3px;
|
||||
min-height: 34px;
|
||||
border: 1px solid #b1b1b1;
|
||||
}
|
||||
.rc-tooltip-arrow,
|
||||
.rc-tooltip-arrow-inner {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
.rc-tooltip-placement-top .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-topRight .rc-tooltip-arrow {
|
||||
transform: translate(-50%, 5px);
|
||||
margin-left: -6px;
|
||||
border-width: 6px 6px 0;
|
||||
border-top-color: #b1b1b1;
|
||||
}
|
||||
.rc-tooltip-placement-top .rc-tooltip-arrow-inner,
|
||||
.rc-tooltip-placement-topLeft .rc-tooltip-arrow-inner,
|
||||
.rc-tooltip-placement-topRight .rc-tooltip-arrow-inner {
|
||||
bottom: 1px;
|
||||
margin-left: -6px;
|
||||
border-width: 6px 6px 0;
|
||||
border-top-color: #ffffff;
|
||||
}
|
||||
.rc-tooltip-placement-top .rc-tooltip-arrow {
|
||||
left: 50%;
|
||||
}
|
||||
.rc-tooltip-placement-topLeft .rc-tooltip-arrow {
|
||||
left: 15%;
|
||||
}
|
||||
.rc-tooltip-placement-topRight .rc-tooltip-arrow {
|
||||
right: 15%;
|
||||
}
|
||||
.rc-tooltip-placement-right .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
|
||||
left: -5px;
|
||||
margin-top: -6px;
|
||||
border-width: 6px 6px 6px 0;
|
||||
border-right-color: #b1b1b1;
|
||||
transform: translateX(calc(-100% + 1px));
|
||||
}
|
||||
.rc-tooltip-placement-right .rc-tooltip-arrow-inner,
|
||||
.rc-tooltip-placement-rightTop .rc-tooltip-arrow-inner,
|
||||
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow-inner {
|
||||
left: 1px;
|
||||
margin-top: -6px;
|
||||
border-width: 6px 6px 6px 0;
|
||||
border-right-color: #ffffff;
|
||||
}
|
||||
.rc-tooltip-placement-right .rc-tooltip-arrow {
|
||||
top: 50%;
|
||||
}
|
||||
.rc-tooltip-placement-rightTop .rc-tooltip-arrow {
|
||||
top: 15%;
|
||||
margin-top: 0;
|
||||
}
|
||||
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
|
||||
bottom: 15%;
|
||||
}
|
||||
.rc-tooltip-placement-left .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
|
||||
right: -5px;
|
||||
margin-top: -6px;
|
||||
border-width: 6px 0 6px 6px;
|
||||
border-left-color: #b1b1b1;
|
||||
transform: translateX(calc(100% - 1px));
|
||||
}
|
||||
.rc-tooltip-placement-left .rc-tooltip-arrow-inner,
|
||||
.rc-tooltip-placement-leftTop .rc-tooltip-arrow-inner,
|
||||
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow-inner {
|
||||
right: 1px;
|
||||
margin-top: -6px;
|
||||
border-width: 6px 0 6px 6px;
|
||||
border-left-color: #ffffff;
|
||||
}
|
||||
.rc-tooltip-placement-left .rc-tooltip-arrow {
|
||||
top: 50%;
|
||||
}
|
||||
.rc-tooltip-placement-leftTop .rc-tooltip-arrow {
|
||||
top: 15%;
|
||||
margin-top: 0;
|
||||
}
|
||||
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
|
||||
bottom: 15%;
|
||||
}
|
||||
.rc-tooltip-placement-bottom .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
|
||||
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
|
||||
transform: translate(-50%, -5px);
|
||||
margin-left: -6px;
|
||||
border-width: 0 6px 6px;
|
||||
border-bottom-color: #b1b1b1;
|
||||
}
|
||||
.rc-tooltip-placement-bottom .rc-tooltip-arrow-inner,
|
||||
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow-inner,
|
||||
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow-inner {
|
||||
top: 1px;
|
||||
margin-left: -6px;
|
||||
border-width: 0 6px 6px;
|
||||
border-bottom-color: #ffffff;
|
||||
}
|
||||
.rc-tooltip-placement-bottom .rc-tooltip-arrow {
|
||||
left: 50%;
|
||||
}
|
||||
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
|
||||
left: 15%;
|
||||
}
|
||||
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
|
||||
right: 15%;
|
||||
}
|
||||
+194
@@ -0,0 +1,194 @@
|
||||
@import "./boostrap/anim.less";
|
||||
|
||||
@tooltip-prefix-cls: rc-tooltip;
|
||||
|
||||
//
|
||||
// Tooltips
|
||||
// --------------------------------------------------
|
||||
@font-size-base : 12px;
|
||||
@line-height-base : 1.5;
|
||||
@border-radius-base : 3px;
|
||||
@overlay-shadow : 0 0 4px rgba(0, 0, 0, 0.17);
|
||||
//** Tooltip text color
|
||||
@tooltip-color: #333333;
|
||||
//** Tooltip background color
|
||||
@tooltip-bg: #ffffff;
|
||||
@tooltip-opacity: 0.9;
|
||||
|
||||
@tooltip-border-width: 1px;
|
||||
@tooltip-border-color: #b1b1b1;
|
||||
@tooltip-shadow-width: 1px;
|
||||
|
||||
//** Tooltip arrow width
|
||||
@tooltip-arrow-width: 6px;
|
||||
//** Tooltip distance with trigger
|
||||
//** Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-border-color;
|
||||
@tooltip-arrow-inner-color: @tooltip-bg;
|
||||
|
||||
// Base class
|
||||
.@{tooltip-prefix-cls} {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
line-height: @line-height-base;
|
||||
font-size: @font-size-base;
|
||||
background-color:rgba(0, 0, 0, 0.05);
|
||||
padding: @tooltip-shadow-width;
|
||||
opacity: @tooltip-opacity;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.@{tooltip-prefix-cls}-inner {
|
||||
padding: 8px 10px;
|
||||
color: @tooltip-color;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-base;
|
||||
min-height: 34px;
|
||||
border:@tooltip-border-width solid @tooltip-border-color;
|
||||
}
|
||||
|
||||
// Arrows
|
||||
.@{tooltip-prefix-cls}-arrow,
|
||||
.@{tooltip-prefix-cls}-arrow-inner{
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.@{tooltip-prefix-cls} {
|
||||
&-placement-top &-arrow,
|
||||
&-placement-topLeft &-arrow,
|
||||
&-placement-topRight &-arrow{
|
||||
// bottom: -@tooltip-arrow-width + @tooltip-shadow-width;
|
||||
transform: translate(-50%, @tooltip-arrow-width - @tooltip-shadow-width);
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-top-color: @tooltip-arrow-color;
|
||||
}
|
||||
|
||||
&-placement-top &-arrow-inner,
|
||||
&-placement-topLeft &-arrow-inner,
|
||||
&-placement-topRight &-arrow-inner{
|
||||
bottom: @tooltip-border-width;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-top-color: @tooltip-arrow-inner-color;
|
||||
}
|
||||
|
||||
&-placement-top &-arrow {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&-placement-topLeft &-arrow {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
&-placement-topRight &-arrow {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
&-placement-right &-arrow,
|
||||
&-placement-rightTop &-arrow,
|
||||
&-placement-rightBottom &-arrow {
|
||||
left: -@tooltip-arrow-width + @tooltip-shadow-width;
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-right-color: @tooltip-arrow-color;
|
||||
transform: translateX(calc(-100% + @tooltip-shadow-width));
|
||||
}
|
||||
|
||||
&-placement-right &-arrow-inner,
|
||||
&-placement-rightTop &-arrow-inner,
|
||||
&-placement-rightBottom &-arrow-inner {
|
||||
left: @tooltip-border-width;
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-right-color: @tooltip-arrow-inner-color;
|
||||
}
|
||||
|
||||
&-placement-right &-arrow {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
&-placement-rightTop &-arrow {
|
||||
top: 15%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&-placement-rightBottom &-arrow {
|
||||
bottom: 15%;
|
||||
}
|
||||
|
||||
&-placement-left &-arrow,
|
||||
&-placement-leftTop &-arrow,
|
||||
&-placement-leftBottom &-arrow {
|
||||
right: -@tooltip-arrow-width + @tooltip-shadow-width;
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-left-color: @tooltip-arrow-color;
|
||||
transform: translateX(calc(100% - @tooltip-shadow-width));
|
||||
}
|
||||
|
||||
&-placement-left &-arrow-inner,
|
||||
&-placement-leftTop &-arrow-inner,
|
||||
&-placement-leftBottom &-arrow-inner {
|
||||
right: @tooltip-border-width;
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-left-color: @tooltip-arrow-inner-color;
|
||||
}
|
||||
|
||||
&-placement-left &-arrow {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
&-placement-leftTop &-arrow {
|
||||
top: 15%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&-placement-leftBottom &-arrow {
|
||||
bottom: 15%;
|
||||
}
|
||||
|
||||
&-placement-bottom &-arrow,
|
||||
&-placement-bottomLeft &-arrow,
|
||||
&-placement-bottomRight &-arrow {
|
||||
// top: -@tooltip-arrow-width + @tooltip-shadow-width;;
|
||||
transform: translate(-50%, -@tooltip-arrow-width + @tooltip-shadow-width);
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-bottom-color: @tooltip-arrow-color;
|
||||
}
|
||||
|
||||
&-placement-bottom &-arrow-inner,
|
||||
&-placement-bottomLeft &-arrow-inner,
|
||||
&-placement-bottomRight &-arrow-inner {
|
||||
top: @tooltip-border-width;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-bottom-color: @tooltip-arrow-inner-color;
|
||||
}
|
||||
|
||||
&-placement-bottom &-arrow {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&-placement-bottomLeft &-arrow {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
&-placement-bottomRight &-arrow {
|
||||
right: 15%;
|
||||
}
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
import * as React from 'react';
|
||||
import type { TooltipProps } from './Tooltip';
|
||||
export interface ContentProps {
|
||||
prefixCls?: string;
|
||||
children: (() => React.ReactNode) | React.ReactNode;
|
||||
id?: string;
|
||||
classNames?: TooltipProps['classNames'];
|
||||
styles?: TooltipProps['styles'];
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
declare const Popup: React.FC<ContentProps>;
|
||||
export default Popup;
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
import { clsx } from 'clsx';
|
||||
import * as React from 'react';
|
||||
const Popup = props => {
|
||||
const {
|
||||
children,
|
||||
prefixCls,
|
||||
id,
|
||||
classNames,
|
||||
styles,
|
||||
className,
|
||||
style
|
||||
} = props;
|
||||
return /*#__PURE__*/React.createElement("div", {
|
||||
id: id,
|
||||
className: clsx(`${prefixCls}-container`, classNames?.container, className),
|
||||
style: {
|
||||
...styles?.container,
|
||||
...style
|
||||
},
|
||||
role: "tooltip"
|
||||
}, typeof children === 'function' ? children() : children);
|
||||
};
|
||||
export default Popup;
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
import type { ArrowType, TriggerProps, TriggerRef } from '@rc-component/trigger';
|
||||
import type { ActionType, AlignType } from '@rc-component/trigger/lib/interface';
|
||||
import * as React from 'react';
|
||||
export type SemanticName = 'root' | 'arrow' | 'container' | 'uniqueContainer';
|
||||
export interface TooltipProps extends Pick<TriggerProps, 'onPopupAlign' | 'builtinPlacements' | 'fresh' | 'mouseLeaveDelay' | 'mouseEnterDelay' | 'prefixCls' | 'forceRender' | 'popupVisible'> {
|
||||
children: React.ReactElement;
|
||||
classNames?: Partial<Record<SemanticName, string>>;
|
||||
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
|
||||
/** Config popup motion */
|
||||
motion?: TriggerProps['popupMotion'];
|
||||
trigger?: ActionType | ActionType[];
|
||||
defaultVisible?: boolean;
|
||||
visible?: boolean;
|
||||
placement?: string;
|
||||
onVisibleChange?: (visible: boolean) => void;
|
||||
afterVisibleChange?: (visible: boolean) => void;
|
||||
overlay: (() => React.ReactNode) | React.ReactNode;
|
||||
getTooltipContainer?: (node: HTMLElement) => HTMLElement;
|
||||
destroyOnHidden?: boolean;
|
||||
align?: AlignType;
|
||||
showArrow?: boolean | ArrowType;
|
||||
arrowContent?: React.ReactNode;
|
||||
id?: string;
|
||||
zIndex?: number;
|
||||
/**
|
||||
* Configures Tooltip to reuse the background for transition usage.
|
||||
* This is an experimental API and may not be stable.
|
||||
*/
|
||||
unique?: TriggerProps['unique'];
|
||||
}
|
||||
export interface TooltipRef extends TriggerRef {
|
||||
}
|
||||
declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<TooltipRef>>;
|
||||
export default Tooltip;
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
||||
import Trigger from '@rc-component/trigger';
|
||||
import useId from "@rc-component/util/es/hooks/useId";
|
||||
import { clsx } from 'clsx';
|
||||
import * as React from 'react';
|
||||
import { useImperativeHandle, useRef } from 'react';
|
||||
import { placements } from "./placements";
|
||||
import Popup from "./Popup";
|
||||
const Tooltip = /*#__PURE__*/React.forwardRef((props, ref) => {
|
||||
const {
|
||||
trigger = ['hover'],
|
||||
mouseEnterDelay = 0,
|
||||
mouseLeaveDelay = 0.1,
|
||||
prefixCls = 'rc-tooltip',
|
||||
children,
|
||||
onVisibleChange,
|
||||
afterVisibleChange,
|
||||
motion,
|
||||
placement = 'right',
|
||||
align = {},
|
||||
destroyOnHidden = false,
|
||||
defaultVisible,
|
||||
getTooltipContainer,
|
||||
arrowContent,
|
||||
overlay,
|
||||
id,
|
||||
showArrow = true,
|
||||
classNames,
|
||||
styles,
|
||||
...restProps
|
||||
} = props;
|
||||
const mergedId = useId(id);
|
||||
const triggerRef = useRef(null);
|
||||
useImperativeHandle(ref, () => triggerRef.current);
|
||||
const extraProps = {
|
||||
...restProps
|
||||
};
|
||||
if ('visible' in props) {
|
||||
extraProps.popupVisible = props.visible;
|
||||
}
|
||||
|
||||
// ========================= Arrow ==========================
|
||||
// Process arrow configuration
|
||||
const mergedArrow = React.useMemo(() => {
|
||||
if (!showArrow) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Convert true to object for unified processing
|
||||
const arrowConfig = showArrow === true ? {} : showArrow;
|
||||
|
||||
// Apply semantic styles with unified logic
|
||||
return {
|
||||
...arrowConfig,
|
||||
className: clsx(arrowConfig.className, classNames?.arrow),
|
||||
style: {
|
||||
...arrowConfig.style,
|
||||
...styles?.arrow
|
||||
},
|
||||
content: arrowConfig.content ?? arrowContent
|
||||
};
|
||||
}, [showArrow, classNames?.arrow, styles?.arrow, arrowContent]);
|
||||
|
||||
// ======================== Children ========================
|
||||
const getChildren = ({
|
||||
open
|
||||
}) => {
|
||||
const child = React.Children.only(children);
|
||||
const ariaProps = {
|
||||
'aria-describedby': overlay && open ? mergedId : undefined
|
||||
};
|
||||
return /*#__PURE__*/React.cloneElement(child, ariaProps);
|
||||
};
|
||||
|
||||
// ========================= Render =========================
|
||||
return /*#__PURE__*/React.createElement(Trigger, _extends({
|
||||
popupClassName: classNames?.root,
|
||||
prefixCls: prefixCls,
|
||||
popup: /*#__PURE__*/React.createElement(Popup, {
|
||||
key: "content",
|
||||
prefixCls: prefixCls,
|
||||
id: mergedId,
|
||||
classNames: classNames,
|
||||
styles: styles
|
||||
}, overlay),
|
||||
action: trigger,
|
||||
builtinPlacements: placements,
|
||||
popupPlacement: placement,
|
||||
ref: triggerRef,
|
||||
popupAlign: align,
|
||||
getPopupContainer: getTooltipContainer,
|
||||
onOpenChange: onVisibleChange,
|
||||
afterOpenChange: afterVisibleChange,
|
||||
popupMotion: motion,
|
||||
defaultPopupVisible: defaultVisible,
|
||||
autoDestroy: destroyOnHidden,
|
||||
mouseLeaveDelay: mouseLeaveDelay,
|
||||
popupStyle: styles?.root,
|
||||
mouseEnterDelay: mouseEnterDelay,
|
||||
arrow: mergedArrow,
|
||||
uniqueContainerClassName: classNames?.uniqueContainer,
|
||||
uniqueContainerStyle: styles?.uniqueContainer
|
||||
}, extraProps), getChildren);
|
||||
});
|
||||
export default Tooltip;
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import Popup from './Popup';
|
||||
import Tooltip from './Tooltip';
|
||||
export type { TooltipRef } from './Tooltip';
|
||||
export { Popup };
|
||||
export default Tooltip;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import Popup from "./Popup";
|
||||
import Tooltip from "./Tooltip";
|
||||
export { Popup };
|
||||
export default Tooltip;
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import type { BuildInPlacements } from '@rc-component/trigger';
|
||||
export declare const placements: BuildInPlacements;
|
||||
export default placements;
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
const autoAdjustOverflowTopBottom = {
|
||||
shiftX: 64,
|
||||
adjustY: 1
|
||||
};
|
||||
const autoAdjustOverflowLeftRight = {
|
||||
adjustX: 1,
|
||||
shiftY: true
|
||||
};
|
||||
const targetOffset = [0, 0];
|
||||
export const placements = {
|
||||
left: {
|
||||
points: ['cr', 'cl'],
|
||||
overflow: autoAdjustOverflowLeftRight,
|
||||
offset: [-4, 0],
|
||||
targetOffset
|
||||
},
|
||||
right: {
|
||||
points: ['cl', 'cr'],
|
||||
overflow: autoAdjustOverflowLeftRight,
|
||||
offset: [4, 0],
|
||||
targetOffset
|
||||
},
|
||||
top: {
|
||||
points: ['bc', 'tc'],
|
||||
overflow: autoAdjustOverflowTopBottom,
|
||||
offset: [0, -4],
|
||||
targetOffset
|
||||
},
|
||||
bottom: {
|
||||
points: ['tc', 'bc'],
|
||||
overflow: autoAdjustOverflowTopBottom,
|
||||
offset: [0, 4],
|
||||
targetOffset
|
||||
},
|
||||
topLeft: {
|
||||
points: ['bl', 'tl'],
|
||||
overflow: autoAdjustOverflowTopBottom,
|
||||
offset: [0, -4],
|
||||
targetOffset
|
||||
},
|
||||
leftTop: {
|
||||
points: ['tr', 'tl'],
|
||||
overflow: autoAdjustOverflowLeftRight,
|
||||
offset: [-4, 0],
|
||||
targetOffset
|
||||
},
|
||||
topRight: {
|
||||
points: ['br', 'tr'],
|
||||
overflow: autoAdjustOverflowTopBottom,
|
||||
offset: [0, -4],
|
||||
targetOffset
|
||||
},
|
||||
rightTop: {
|
||||
points: ['tl', 'tr'],
|
||||
overflow: autoAdjustOverflowLeftRight,
|
||||
offset: [4, 0],
|
||||
targetOffset
|
||||
},
|
||||
bottomRight: {
|
||||
points: ['tr', 'br'],
|
||||
overflow: autoAdjustOverflowTopBottom,
|
||||
offset: [0, 4],
|
||||
targetOffset
|
||||
},
|
||||
rightBottom: {
|
||||
points: ['bl', 'br'],
|
||||
overflow: autoAdjustOverflowLeftRight,
|
||||
offset: [4, 0],
|
||||
targetOffset
|
||||
},
|
||||
bottomLeft: {
|
||||
points: ['tl', 'bl'],
|
||||
overflow: autoAdjustOverflowTopBottom,
|
||||
offset: [0, 4],
|
||||
targetOffset
|
||||
},
|
||||
leftBottom: {
|
||||
points: ['br', 'bl'],
|
||||
overflow: autoAdjustOverflowLeftRight,
|
||||
offset: [-4, 0],
|
||||
targetOffset
|
||||
}
|
||||
};
|
||||
export default placements;
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
import * as React from 'react';
|
||||
import type { TooltipProps } from './Tooltip';
|
||||
export interface ContentProps {
|
||||
prefixCls?: string;
|
||||
children: (() => React.ReactNode) | React.ReactNode;
|
||||
id?: string;
|
||||
classNames?: TooltipProps['classNames'];
|
||||
styles?: TooltipProps['styles'];
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
declare const Popup: React.FC<ContentProps>;
|
||||
export default Popup;
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _clsx = require("clsx");
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||||
const Popup = props => {
|
||||
const {
|
||||
children,
|
||||
prefixCls,
|
||||
id,
|
||||
classNames,
|
||||
styles,
|
||||
className,
|
||||
style
|
||||
} = props;
|
||||
return /*#__PURE__*/React.createElement("div", {
|
||||
id: id,
|
||||
className: (0, _clsx.clsx)(`${prefixCls}-container`, classNames?.container, className),
|
||||
style: {
|
||||
...styles?.container,
|
||||
...style
|
||||
},
|
||||
role: "tooltip"
|
||||
}, typeof children === 'function' ? children() : children);
|
||||
};
|
||||
var _default = exports.default = Popup;
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
import type { ArrowType, TriggerProps, TriggerRef } from '@rc-component/trigger';
|
||||
import type { ActionType, AlignType } from '@rc-component/trigger/lib/interface';
|
||||
import * as React from 'react';
|
||||
export type SemanticName = 'root' | 'arrow' | 'container' | 'uniqueContainer';
|
||||
export interface TooltipProps extends Pick<TriggerProps, 'onPopupAlign' | 'builtinPlacements' | 'fresh' | 'mouseLeaveDelay' | 'mouseEnterDelay' | 'prefixCls' | 'forceRender' | 'popupVisible'> {
|
||||
children: React.ReactElement;
|
||||
classNames?: Partial<Record<SemanticName, string>>;
|
||||
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
|
||||
/** Config popup motion */
|
||||
motion?: TriggerProps['popupMotion'];
|
||||
trigger?: ActionType | ActionType[];
|
||||
defaultVisible?: boolean;
|
||||
visible?: boolean;
|
||||
placement?: string;
|
||||
onVisibleChange?: (visible: boolean) => void;
|
||||
afterVisibleChange?: (visible: boolean) => void;
|
||||
overlay: (() => React.ReactNode) | React.ReactNode;
|
||||
getTooltipContainer?: (node: HTMLElement) => HTMLElement;
|
||||
destroyOnHidden?: boolean;
|
||||
align?: AlignType;
|
||||
showArrow?: boolean | ArrowType;
|
||||
arrowContent?: React.ReactNode;
|
||||
id?: string;
|
||||
zIndex?: number;
|
||||
/**
|
||||
* Configures Tooltip to reuse the background for transition usage.
|
||||
* This is an experimental API and may not be stable.
|
||||
*/
|
||||
unique?: TriggerProps['unique'];
|
||||
}
|
||||
export interface TooltipRef extends TriggerRef {
|
||||
}
|
||||
declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<TooltipRef>>;
|
||||
export default Tooltip;
|
||||
+114
@@ -0,0 +1,114 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _trigger = _interopRequireDefault(require("@rc-component/trigger"));
|
||||
var _useId = _interopRequireDefault(require("@rc-component/util/lib/hooks/useId"));
|
||||
var _clsx = require("clsx");
|
||||
var _react = _interopRequireWildcard(require("react"));
|
||||
var React = _react;
|
||||
var _placements = require("./placements");
|
||||
var _Popup = _interopRequireDefault(require("./Popup"));
|
||||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
||||
const Tooltip = /*#__PURE__*/React.forwardRef((props, ref) => {
|
||||
const {
|
||||
trigger = ['hover'],
|
||||
mouseEnterDelay = 0,
|
||||
mouseLeaveDelay = 0.1,
|
||||
prefixCls = 'rc-tooltip',
|
||||
children,
|
||||
onVisibleChange,
|
||||
afterVisibleChange,
|
||||
motion,
|
||||
placement = 'right',
|
||||
align = {},
|
||||
destroyOnHidden = false,
|
||||
defaultVisible,
|
||||
getTooltipContainer,
|
||||
arrowContent,
|
||||
overlay,
|
||||
id,
|
||||
showArrow = true,
|
||||
classNames,
|
||||
styles,
|
||||
...restProps
|
||||
} = props;
|
||||
const mergedId = (0, _useId.default)(id);
|
||||
const triggerRef = (0, _react.useRef)(null);
|
||||
(0, _react.useImperativeHandle)(ref, () => triggerRef.current);
|
||||
const extraProps = {
|
||||
...restProps
|
||||
};
|
||||
if ('visible' in props) {
|
||||
extraProps.popupVisible = props.visible;
|
||||
}
|
||||
|
||||
// ========================= Arrow ==========================
|
||||
// Process arrow configuration
|
||||
const mergedArrow = React.useMemo(() => {
|
||||
if (!showArrow) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Convert true to object for unified processing
|
||||
const arrowConfig = showArrow === true ? {} : showArrow;
|
||||
|
||||
// Apply semantic styles with unified logic
|
||||
return {
|
||||
...arrowConfig,
|
||||
className: (0, _clsx.clsx)(arrowConfig.className, classNames?.arrow),
|
||||
style: {
|
||||
...arrowConfig.style,
|
||||
...styles?.arrow
|
||||
},
|
||||
content: arrowConfig.content ?? arrowContent
|
||||
};
|
||||
}, [showArrow, classNames?.arrow, styles?.arrow, arrowContent]);
|
||||
|
||||
// ======================== Children ========================
|
||||
const getChildren = ({
|
||||
open
|
||||
}) => {
|
||||
const child = React.Children.only(children);
|
||||
const ariaProps = {
|
||||
'aria-describedby': overlay && open ? mergedId : undefined
|
||||
};
|
||||
return /*#__PURE__*/React.cloneElement(child, ariaProps);
|
||||
};
|
||||
|
||||
// ========================= Render =========================
|
||||
return /*#__PURE__*/React.createElement(_trigger.default, _extends({
|
||||
popupClassName: classNames?.root,
|
||||
prefixCls: prefixCls,
|
||||
popup: /*#__PURE__*/React.createElement(_Popup.default, {
|
||||
key: "content",
|
||||
prefixCls: prefixCls,
|
||||
id: mergedId,
|
||||
classNames: classNames,
|
||||
styles: styles
|
||||
}, overlay),
|
||||
action: trigger,
|
||||
builtinPlacements: _placements.placements,
|
||||
popupPlacement: placement,
|
||||
ref: triggerRef,
|
||||
popupAlign: align,
|
||||
getPopupContainer: getTooltipContainer,
|
||||
onOpenChange: onVisibleChange,
|
||||
afterOpenChange: afterVisibleChange,
|
||||
popupMotion: motion,
|
||||
defaultPopupVisible: defaultVisible,
|
||||
autoDestroy: destroyOnHidden,
|
||||
mouseLeaveDelay: mouseLeaveDelay,
|
||||
popupStyle: styles?.root,
|
||||
mouseEnterDelay: mouseEnterDelay,
|
||||
arrow: mergedArrow,
|
||||
uniqueContainerClassName: classNames?.uniqueContainer,
|
||||
uniqueContainerStyle: styles?.uniqueContainer
|
||||
}, extraProps), getChildren);
|
||||
});
|
||||
var _default = exports.default = Tooltip;
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import Popup from './Popup';
|
||||
import Tooltip from './Tooltip';
|
||||
export type { TooltipRef } from './Tooltip';
|
||||
export { Popup };
|
||||
export default Tooltip;
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
Object.defineProperty(exports, "Popup", {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _Popup.default;
|
||||
}
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _Popup = _interopRequireDefault(require("./Popup"));
|
||||
var _Tooltip = _interopRequireDefault(require("./Tooltip"));
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
var _default = exports.default = _Tooltip.default;
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import type { BuildInPlacements } from '@rc-component/trigger';
|
||||
export declare const placements: BuildInPlacements;
|
||||
export default placements;
|
||||
+90
@@ -0,0 +1,90 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.placements = exports.default = void 0;
|
||||
const autoAdjustOverflowTopBottom = {
|
||||
shiftX: 64,
|
||||
adjustY: 1
|
||||
};
|
||||
const autoAdjustOverflowLeftRight = {
|
||||
adjustX: 1,
|
||||
shiftY: true
|
||||
};
|
||||
const targetOffset = [0, 0];
|
||||
const placements = exports.placements = {
|
||||
left: {
|
||||
points: ['cr', 'cl'],
|
||||
overflow: autoAdjustOverflowLeftRight,
|
||||
offset: [-4, 0],
|
||||
targetOffset
|
||||
},
|
||||
right: {
|
||||
points: ['cl', 'cr'],
|
||||
overflow: autoAdjustOverflowLeftRight,
|
||||
offset: [4, 0],
|
||||
targetOffset
|
||||
},
|
||||
top: {
|
||||
points: ['bc', 'tc'],
|
||||
overflow: autoAdjustOverflowTopBottom,
|
||||
offset: [0, -4],
|
||||
targetOffset
|
||||
},
|
||||
bottom: {
|
||||
points: ['tc', 'bc'],
|
||||
overflow: autoAdjustOverflowTopBottom,
|
||||
offset: [0, 4],
|
||||
targetOffset
|
||||
},
|
||||
topLeft: {
|
||||
points: ['bl', 'tl'],
|
||||
overflow: autoAdjustOverflowTopBottom,
|
||||
offset: [0, -4],
|
||||
targetOffset
|
||||
},
|
||||
leftTop: {
|
||||
points: ['tr', 'tl'],
|
||||
overflow: autoAdjustOverflowLeftRight,
|
||||
offset: [-4, 0],
|
||||
targetOffset
|
||||
},
|
||||
topRight: {
|
||||
points: ['br', 'tr'],
|
||||
overflow: autoAdjustOverflowTopBottom,
|
||||
offset: [0, -4],
|
||||
targetOffset
|
||||
},
|
||||
rightTop: {
|
||||
points: ['tl', 'tr'],
|
||||
overflow: autoAdjustOverflowLeftRight,
|
||||
offset: [4, 0],
|
||||
targetOffset
|
||||
},
|
||||
bottomRight: {
|
||||
points: ['tr', 'br'],
|
||||
overflow: autoAdjustOverflowTopBottom,
|
||||
offset: [0, 4],
|
||||
targetOffset
|
||||
},
|
||||
rightBottom: {
|
||||
points: ['bl', 'br'],
|
||||
overflow: autoAdjustOverflowLeftRight,
|
||||
offset: [4, 0],
|
||||
targetOffset
|
||||
},
|
||||
bottomLeft: {
|
||||
points: ['tl', 'bl'],
|
||||
overflow: autoAdjustOverflowTopBottom,
|
||||
offset: [0, 4],
|
||||
targetOffset
|
||||
},
|
||||
leftBottom: {
|
||||
points: ['br', 'bl'],
|
||||
overflow: autoAdjustOverflowLeftRight,
|
||||
offset: [-4, 0],
|
||||
targetOffset
|
||||
}
|
||||
};
|
||||
var _default = exports.default = placements;
|
||||
+73
@@ -0,0 +1,73 @@
|
||||
{
|
||||
"name": "@rc-component/tooltip",
|
||||
"version": "1.4.0",
|
||||
"description": "React Tooltip",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"react-tooltip",
|
||||
"tooltip"
|
||||
],
|
||||
"homepage": "http://github.com/react-component/tooltip",
|
||||
"bugs": {
|
||||
"url": "http://github.com/react-component/tooltip/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:react-component/tooltip.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"maintainers": [
|
||||
"yiminghe@gmail.com"
|
||||
],
|
||||
"main": "lib/index",
|
||||
"module": "es/index",
|
||||
"files": [
|
||||
"lib",
|
||||
"es",
|
||||
"assets/*.css",
|
||||
"assets/*.less"
|
||||
],
|
||||
"scripts": {
|
||||
"compile": "father build && lessc assets/bootstrap.less assets/bootstrap.css && lessc assets/bootstrap_white.less assets/bootstrap_white.css",
|
||||
"docs:build": "dumi build",
|
||||
"docs:deploy": "npm run docs:build && gh-pages -d dist",
|
||||
"lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
|
||||
"now-build": "npm run docs:build",
|
||||
"prepare": "dumi setup",
|
||||
"prepublishOnly": "npm run compile && rc-np",
|
||||
"postpublish": "npm run docs:build && npm run docs:deploy",
|
||||
"start": "dumi dev",
|
||||
"test": "rc-test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@rc-component/trigger": "^3.7.1",
|
||||
"@rc-component/util": "^1.3.0",
|
||||
"clsx": "^2.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rc-component/father-plugin": "^2.0.1",
|
||||
"@rc-component/np": "^1.0.3",
|
||||
"@testing-library/jest-dom": "^6.9.1",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@types/jest": "^29.4.0",
|
||||
"@types/node": "^22.15.18",
|
||||
"@types/react": "^19.1.4",
|
||||
"@types/react-dom": "^19.1.5",
|
||||
"@types/warning": "^3.0.0",
|
||||
"dumi": "^2.2.13",
|
||||
"eslint": "^8.56.0",
|
||||
"father": "^4.0.0",
|
||||
"gh-pages": "^3.1.0",
|
||||
"less": "^4.1.1",
|
||||
"prettier": "^3.6.2",
|
||||
"rc-test": "^7.0.9",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"typescript": "^4.0.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18.0.0",
|
||||
"react-dom": ">=18.0.0"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user