](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera |
-| --------- | --------- | --------- | --------- | --------- |
-| IE 8 + ✔ | Firefox 31.0+ ✔ | Chrome 31.0+ ✔ | Safari 7.0+ ✔ | Opera 30.0+ ✔ |
-
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| IE 8 + ✔ | Firefox 31.0+ ✔ | Chrome 31.0+ ✔ | Safari 7.0+ ✔ | Opera 30.0+ ✔ |
## Install
@@ -47,153 +57,41 @@ ReactDOM.render(
| name | -type | -default | -description | -
|---|---|---|---|
| overlayClassName | -string | -- | additional className added to popup overlay | -
| trigger | -string | string[] | -['hover'] | -which actions cause tooltip shown. enum of 'hover','click','focus' | -
| mouseEnterDelay | -number | -0 | -delay time to show when mouse enter.unit: s. | -
| mouseLeaveDelay | -number | -0.1 | -delay time to hide when mouse leave.unit: s. | -
| overlayStyle | -Object | -- | additional style of overlay node | -
| prefixCls | -String | -rc-tooltip | -prefix class name | -
| transitionName | -String|Object | -- | same as https://github.com/react-component/animate | -
| onVisibleChange | -Function | -- | call when visible is changed | -
| afterVisibleChange | -Function | -- | call after visible is changed | -
| visible | -boolean | -- | whether tooltip is visible | -
| defaultVisible | -boolean | -- | whether tooltip is visible initially | -
| placement | -String | -- | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | -
| align | -Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align) | -- | value will be merged into placement's config | -
| onPopupAlign | -function(popupDomNode, align) | -- | callback when popup node is aligned | -
| overlay | -React.Element | () => React.Element | -- | popup content | -
| overlayInnerStyle | -Object | -- | set overlay inner style | -
| arrowContent | -React.Node | -null | -arrow content | -
| getTooltipContainer | -function | -- | Function returning html node which will act as tooltip container. By default the tooltip attaches to the body. If you want to change the container, simply return a new element. | -
| destroyTooltipOnHide | -boolean | { keepParent: boolean } | -false | -whether destroy tooltip when tooltip is hidden.In general, destroyTooltipOnHide will only remove itself instead of parent container of it.Parent container will be removed include tooltip when keepParent is true | -
| id | -String | -- | Id which gets attached to the tooltip content. Can be used with aria-describedby to achieve Screenreader-Support. | -
\ No newline at end of file
+
\ No newline at end of file
+
\ No newline at end of file
+
\ No newline at end of file
+
\ No newline at end of file
+
-
- Left
-
-
-
-
- Top
-
-
-
-
- Bottom
-
-
-
-
- Right
-
-
+ <>
+
+
+
+
-
-
-
- Left Top
-
-
-
-
- Left Bottom
-
-
-
-
- Right Top
-
-
-
-
- Right Bottom
-
-
+
+
+ Debug Usage
+
+ Test
+
-
-
+
);
export default Test;
diff --git a/docs/examples/point.tsx b/docs/examples/point.tsx
new file mode 100644
index 0000000..d59ce6a
--- /dev/null
+++ b/docs/examples/point.tsx
@@ -0,0 +1,56 @@
+import Tooltip from 'rc-tooltip';
+import React from 'react';
+import '../../assets/bootstrap_white.less';
+
+const text = Tooltip Text;
+
+const Test = () => {
+ const scrollRef = React.useRef();
+
+ return (
+
+
+
+ {
+export interface TooltipProps
+ extends Pick<
+ TriggerProps,
+ | 'onPopupAlign'
+ | 'builtinPlacements'
+ | 'fresh'
+ | 'children'
+ | 'mouseLeaveDelay'
+ | 'mouseEnterDelay'
+ | 'prefixCls'
+ > {
trigger?: ActionType | ActionType[];
defaultVisible?: boolean;
visible?: boolean;
@@ -22,25 +32,22 @@ export interface TooltipProps extends Pick React.ReactNode) | React.ReactNode;
overlayStyle?: React.CSSProperties;
overlayClassName?: string;
- prefixCls?: string;
- mouseEnterDelay?: number;
- mouseLeaveDelay?: number;
getTooltipContainer?: (node: HTMLElement) => HTMLElement;
- destroyTooltipOnHide?:
- | boolean
- | {
- keepParent?: boolean;
- };
+ destroyTooltipOnHide?: boolean;
align?: AlignType;
+ showArrow?: boolean | ArrowType;
arrowContent?: React.ReactNode;
id?: string;
- children?: React.ReactElement;
- popupVisible?: boolean;
overlayInnerStyle?: React.CSSProperties;
zIndex?: number;
}
-const Tooltip = (props: TooltipProps, ref) => {
+export interface TooltipRef {
+ nativeElement: HTMLElement;
+ forceAlign: VoidFunction;
+}
+
+const Tooltip = (props: TooltipProps, ref: React.Ref) => {
const {
overlayClassName,
trigger = ['hover'],
@@ -60,42 +67,26 @@ const Tooltip = (props: TooltipProps, ref) => {
defaultVisible,
getTooltipContainer,
overlayInnerStyle,
+ arrowContent,
+ overlay,
+ id,
+ showArrow = true,
...restProps
} = props;
- const domRef = useRef(null);
- useImperativeHandle(ref, () => domRef.current);
+ const triggerRef = useRef(null);
+ useImperativeHandle(ref, () => triggerRef.current);
- const extraProps = { ...restProps };
+ const extraProps: Partial = { ...restProps };
if ('visible' in props) {
extraProps.popupVisible = props.visible;
}
- const getPopupElement = () => {
- const { arrowContent = null, overlay, id } = props;
- return [
-
- {arrowContent}
- ,
-
+ {overlay}
+
+ );
return (
{
action={trigger}
builtinPlacements={placements}
popupPlacement={placement}
- ref={domRef}
+ ref={triggerRef}
popupAlign={align}
getPopupContainer={getTooltipContainer}
onPopupVisibleChange={onVisibleChange}
@@ -114,11 +105,11 @@ const Tooltip = (props: TooltipProps, ref) => {
popupAnimation={animation}
popupMotion={motion}
defaultPopupVisible={defaultVisible}
- destroyPopupOnHide={destroyTooltip}
- autoDestroy={autoDestroy}
+ autoDestroy={destroyTooltipOnHide}
mouseLeaveDelay={mouseLeaveDelay}
popupStyle={overlayStyle}
mouseEnterDelay={mouseEnterDelay}
+ arrow={showArrow}
{...extraProps}
>
{children}
diff --git a/src/index.tsx b/src/index.tsx
index d8851cb..6da28f5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,3 +1,7 @@
+import Popup from './Popup';
import Tooltip from './Tooltip';
+export type { TooltipRef } from './Tooltip';
+export { Popup };
+
export default Tooltip;
diff --git a/src/placements.tsx b/src/placements.tsx
index 789dce3..6371e88 100644
--- a/src/placements.tsx
+++ b/src/placements.tsx
@@ -1,82 +1,84 @@
-import { BuildInPlacements } from 'rc-trigger';
+import type { BuildInPlacements } from '@rc-component/trigger';
-const autoAdjustOverflow = {
- adjustX: 1,
+const autoAdjustOverflowTopBottom = {
+ shiftX: 64,
adjustY: 1,
};
+const autoAdjustOverflowLeftRight = { adjustX: 1, shiftY: true };
+
const targetOffset = [0, 0];
export const placements: BuildInPlacements = {
left: {
points: ['cr', 'cl'],
- overflow: autoAdjustOverflow,
+ overflow: autoAdjustOverflowLeftRight,
offset: [-4, 0],
targetOffset,
},
right: {
points: ['cl', 'cr'],
- overflow: autoAdjustOverflow,
+ overflow: autoAdjustOverflowLeftRight,
offset: [4, 0],
targetOffset,
},
top: {
points: ['bc', 'tc'],
- overflow: autoAdjustOverflow,
+ overflow: autoAdjustOverflowTopBottom,
offset: [0, -4],
targetOffset,
},
bottom: {
points: ['tc', 'bc'],
- overflow: autoAdjustOverflow,
+ overflow: autoAdjustOverflowTopBottom,
offset: [0, 4],
targetOffset,
},
topLeft: {
points: ['bl', 'tl'],
- overflow: autoAdjustOverflow,
+ overflow: autoAdjustOverflowTopBottom,
offset: [0, -4],
targetOffset,
},
leftTop: {
points: ['tr', 'tl'],
- overflow: autoAdjustOverflow,
+ overflow: autoAdjustOverflowLeftRight,
offset: [-4, 0],
targetOffset,
},
topRight: {
points: ['br', 'tr'],
- overflow: autoAdjustOverflow,
+ overflow: autoAdjustOverflowTopBottom,
offset: [0, -4],
targetOffset,
},
rightTop: {
points: ['tl', 'tr'],
- overflow: autoAdjustOverflow,
+ overflow: autoAdjustOverflowLeftRight,
offset: [4, 0],
targetOffset,
},
bottomRight: {
points: ['tr', 'br'],
- overflow: autoAdjustOverflow,
+ overflow: autoAdjustOverflowTopBottom,
offset: [0, 4],
targetOffset,
},
rightBottom: {
points: ['bl', 'br'],
- overflow: autoAdjustOverflow,
+ overflow: autoAdjustOverflowLeftRight,
offset: [4, 0],
targetOffset,
},
bottomLeft: {
points: ['tl', 'bl'],
- overflow: autoAdjustOverflow,
+ overflow: autoAdjustOverflowTopBottom,
offset: [0, 4],
targetOffset,
},
leftBottom: {
points: ['br', 'bl'],
- overflow: autoAdjustOverflow,
+ overflow: autoAdjustOverflowLeftRight,
offset: [-4, 0],
targetOffset,
},
diff --git a/tests/__mocks__/@rc-component/trigger.js b/tests/__mocks__/@rc-component/trigger.js
new file mode 100644
index 0000000..887c966
--- /dev/null
+++ b/tests/__mocks__/@rc-component/trigger.js
@@ -0,0 +1,3 @@
+import Trigger from '@rc-component/trigger/lib/mock';
+
+export default Trigger;
diff --git a/tests/__mocks__/rc-trigger.js b/tests/__mocks__/rc-trigger.js
deleted file mode 100644
index 3230307..0000000
--- a/tests/__mocks__/rc-trigger.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Trigger from 'rc-trigger/lib/mock';
-
-export default Trigger;
diff --git a/tests/index.test.js b/tests/index.test.js
deleted file mode 100644
index 30e2ebc..0000000
--- a/tests/index.test.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Tooltip from '../src';
-
-const verifyContent = (wrapper, content) => {
- expect(wrapper.find('.x-content').text()).toBe(content);
- expect(wrapper.find('Trigger').instance().getPopupDomNode()).toBeTruthy();
- wrapper.find('.target').simulate('click');
- expect(wrapper.find('.rc-tooltip').hostNodes().hasClass('rc-tooltip-hidden')).toBe(true);
-};
-
-describe('rc-tooltip', () => {
- window.requestAnimationFrame = window.setTimeout;
- window.cancelAnimationFrame = window.clearTimeout;
-
- describe('shows and hides itself on click', () => {
- it('using an element overlay', () => {
- const wrapper = mount(
- Tooltip content}
- >
- Click this
- ,
- );
- wrapper.find('.target').simulate('click');
- verifyContent(wrapper, 'Tooltip content');
- });
-
- it('using a function overlay', () => {
- const wrapper = mount(
- Tooltip content}
- >
- Click this
- ,
- );
- wrapper.find('.target').simulate('click');
- verifyContent(wrapper, 'Tooltip content');
- });
-
- // https://github.com/ant-design/ant-design/pull/23155
- it('using style inner style', () => {
- const wrapper = mount(
- Tooltip content}
- overlayInnerStyle={{ background: 'red' }}
- >
- Click this
- ,
- );
- wrapper.find('.target').simulate('click');
- expect(wrapper.find('.rc-tooltip-inner').props().style).toEqual({ background: 'red' });
- });
-
- it('access of ref', () => {
- const domRef = React.createRef();
- mount(
- Tooltip content}
- ref={domRef}
- >
- Click this
- ,
- );
- expect(domRef.current).toBeTruthy();
- });
- });
- describe('destroyTooltipOnHide', () => {
- const destroyVerifyContent = (wrapper, content) => {
- wrapper.find('.target').simulate('click');
- expect(wrapper.find('.x-content').text()).toBe(content);
- expect(wrapper.find('Trigger').instance().getPopupDomNode()).toBeTruthy();
- wrapper.find('.target').simulate('click');
- };
- it('default value', () => {
- const wrapper = mount(
- Tooltip content}
- >
- Click this
- ,
- );
- wrapper.find('.target').simulate('click');
- verifyContent(wrapper, 'Tooltip content');
- });
- it('should only remove tooltip when value is true', () => {
- const wrapper = mount(
- Tooltip content}
- >
- Click this
- ,
- );
- destroyVerifyContent(wrapper, 'Tooltip content');
- expect(wrapper.html()).toBe('Click this');
- });
- it('should only remove tooltip when keepParent is true', () => {
- const wrapper = mount(
- Tooltip content}
- >
- Click this
- ,
- );
- destroyVerifyContent(wrapper, 'Tooltip content');
- expect(wrapper.html()).toBe('Click this');
- });
- it('should remove tooltip and container when keepParent is false', () => {
- const wrapper = mount(
- Tooltip content}
- >
- Click this
- ,
- );
- destroyVerifyContent(wrapper, 'Tooltip content');
- expect(wrapper.html()).toBe('Click this');
- });
- });
-
- // This is only test for motion pass to internal rc-trigger
- // It's safe to remove since meaningless to rc-tooltip if refactor
- it('should motion props work', () => {
- const wrapper = mount(
-
- Bamboo
- ,
- );
-
- expect(wrapper.find('Trigger').props().popupMotion).toEqual({ motionName: 'bamboo-is-light' });
- });
-
- it('zIndex', () => {
- jest.useFakeTimers();
-
- const wrapper = mount(
-
- Light
- ,
- );
- wrapper.find('.target').simulate('click');
-
- jest.runAllTimers();
- wrapper.update();
-
- expect(wrapper.find('div.rc-tooltip').prop('style')).toEqual(
- expect.objectContaining({
- zIndex: 903,
- }),
- );
-
- jest.useRealTimers();
- });
-});
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
new file mode 100644
index 0000000..d167d0c
--- /dev/null
+++ b/tests/index.test.tsx
@@ -0,0 +1,254 @@
+import { act, fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import Tooltip, { TooltipRef } from '../src';
+
+const verifyContent = (wrapper: HTMLElement, content: string) => {
+ expect(wrapper.querySelector('.x-content').textContent).toBe(content);
+ fireEvent.click(wrapper.querySelector('.target'));
+ expect(wrapper.querySelector('.rc-tooltip').classList.contains('rc-tooltip-hidden')).toBe(true);
+};
+
+describe('rc-tooltip', () => {
+ window.requestAnimationFrame = window.setTimeout;
+ window.cancelAnimationFrame = window.clearTimeout;
+ beforeEach(() => {
+ jest.useFakeTimers();
+ });
+
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+
+ async function waitFakeTimers() {
+ for (let i = 0; i < 100; i += 1) {
+ await act(async () => {
+ jest.advanceTimersByTime(100);
+ await Promise.resolve();
+ });
+ }
+ }
+
+ describe('shows and hides itself on click', () => {
+ it('using an element overlay', () => {
+ const { container } = render(
+ Tooltip content}
+ >
+ Click this
+ ,
+ );
+
+ fireEvent.click(container.querySelector('.target'));
+
+ verifyContent(container, 'Tooltip content');
+ });
+
+ it('using a function overlay', () => {
+ const { container } = render(
+ Tooltip content}
+ >
+ Click this
+ ,
+ );
+ fireEvent.click(container.querySelector('.target'));
+ verifyContent(container, 'Tooltip content');
+ });
+
+ // https://github.com/ant-design/ant-design/pull/23155
+ it('using style inner style', () => {
+ const { container } = render(
+ Tooltip content}
+ overlayInnerStyle={{ background: 'red' }}
+ >
+ Click this
+ ,
+ );
+ fireEvent.click(container.querySelector('.target'));
+ expect(
+ (container.querySelector('.rc-tooltip-inner') as HTMLElement).style.background,
+ ).toEqual('red');
+ });
+
+ it('access of ref', () => {
+ const domRef = React.createRef();
+ render(
+ Tooltip content}
+ ref={domRef}
+ >
+ Click this
+ ,
+ );
+ expect(domRef.current).toBeTruthy();
+ });
+ });
+
+ describe('destroyTooltipOnHide', () => {
+ const destroyVerifyContent = async (wrapper: HTMLElement, content: string) => {
+ fireEvent.click(wrapper.querySelector('.target'));
+ await waitFakeTimers();
+
+ expect(wrapper.querySelector('.x-content').textContent).toBe(content);
+
+ fireEvent.click(wrapper.querySelector('.target'));
+ await waitFakeTimers();
+ };
+ it('default value', () => {
+ const { container } = render(
+ Tooltip content}
+ >
+ Click this
+ ,
+ );
+ fireEvent.click(container.querySelector('.target'));
+ verifyContent(container, 'Tooltip content');
+ });
+
+ it('should only remove tooltip when value is true', async () => {
+ const { container } = render(
+ Tooltip content}
+ >
+ Click this
+ ,
+ );
+ await destroyVerifyContent(container, 'Tooltip content');
+ expect(document.querySelector('.x-content')).toBeFalsy();
+ });
+ });
+
+ it('zIndex', () => {
+ jest.useFakeTimers();
+
+ const { container } = render(
+
+ Light
+ ,
+ );
+ fireEvent.click(container.querySelector('.target'));
+
+ jest.runAllTimers();
+
+ expect((container.querySelector('div.rc-tooltip') as HTMLElement).style.zIndex).toBe('903');
+
+ jest.useRealTimers();
+ });
+
+ describe('showArrow', () => {
+ it('should show tooltip arrow default', () => {
+ const { container } = render(
+ Tooltip content}
+ >
+ Click this
+ ,
+ );
+ fireEvent.click(container.querySelector('.target'));
+ expect(container.querySelector('.rc-tooltip-arrow')).toBeTruthy();
+ });
+ it('should show tooltip arrow when showArrow is true', () => {
+ const { container } = render(
+ Tooltip content}
+ showArrow
+ >
+ Click this
+ ,
+ );
+ fireEvent.click(container.querySelector('.target'));
+ expect(container.querySelector('.rc-tooltip-arrow')).toBeTruthy();
+ });
+ it('should show tooltip arrow when showArrow is object', () => {
+ const { container } = render(
+ Tooltip content}
+ showArrow={{
+ className: 'abc',
+ }}
+ >
+ Click this
+ ,
+ );
+ fireEvent.click(container.querySelector('.target'));
+ expect(container.querySelector('.rc-tooltip-arrow')).toBeTruthy();
+ expect(container.querySelector('.rc-tooltip-arrow').classList.contains('abc')).toBeTruthy();
+ });
+ it('should hide tooltip arrow when showArrow is false', () => {
+ const { container } = render(
+ Tooltip content}
+ showArrow={false}
+ >
+ Click this
+ ,
+ );
+ fireEvent.click(container.querySelector('.target'));
+ expect(container.querySelector('.rc-tooltip').classList).not.toContain(
+ 'rc-tooltip-show-arrow',
+ );
+ expect(container.querySelector('.rc-tooltip-arrow')).toBeFalsy();
+ });
+ });
+
+ it('visible', () => {
+ const App = () => {
+ const [open, setOpen] = React.useState(false);
+ return (
+ Tooltip content} visible={open}>
+ {
+ setOpen(true);
+ }}
+ />
+
+ );
+ };
+ const { container } = render(();
+
+ const { container } = render(
+