Skip to content

Commit 393ce98

Browse files
moonrailgunmoonrailgun
authored
Add arrowVisible option into tooltip which can hide arrow (#232)
* Add arrowVisible option into tooltip which can hide arrow * Fix testcase typo * rename arrowVisible to showArrow
1 parent 69fb220 commit 393ce98

File tree

5 files changed

+160
-4
lines changed

5 files changed

+160
-4
lines changed

‎README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,12 @@ Online examples: <https://react-component.github.io/tooltip/examples/>
168168
<td></td>
169169
<td>set overlay inner style</td>
170170
</tr>
171+
<tr>
172+
<td>showArrow</td>
173+
<td>boolean</td>
174+
<td>true</td>
175+
<td>arrow visible</td>
176+
</tr>
171177
<tr>
172178
<td>arrowContent</td>
173179
<td>React.Node</td>

‎docs/demo/showArrow.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## showArrow
2+
3+
<code src="../examples/showArrow.tsx">

‎docs/examples/showArrow.tsx

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import React from 'react';
2+
import Tooltip from 'rc-tooltip';
3+
import '../../assets/bootstrap_white.less';
4+
5+
const text = <span>Tooltip Text</span>;
6+
const styles = {
7+
display: 'table-cell',
8+
height: '60px',
9+
width: '80px',
10+
textAlign: 'center',
11+
background: '#f6f6f6',
12+
verticalAlign: 'middle',
13+
border: '5px solid white',
14+
};
15+
16+
const rowStyle = {
17+
display: 'table-row',
18+
};
19+
20+
const Test = () => (
21+
<div style={{ display: 'table', padding: 120 }}>
22+
<div style={rowStyle}>
23+
<Tooltip placement="left" overlay={text} showArrow={false}>
24+
<a href="#" style={styles}>
25+
Left
26+
</a>
27+
</Tooltip>
28+
<Tooltip placement="top" overlay={text} showArrow={false}>
29+
<a href="#" style={styles}>
30+
Top
31+
</a>
32+
</Tooltip>
33+
<Tooltip placement="bottom" overlay={text} showArrow={false}>
34+
<a href="#" style={styles}>
35+
Bottom
36+
</a>
37+
</Tooltip>
38+
<Tooltip placement="right" overlay={text} showArrow={false}>
39+
<a href="#" style={styles}>
40+
Right
41+
</a>
42+
</Tooltip>
43+
</div>
44+
<div style={rowStyle}>
45+
<Tooltip placement="leftTop" overlay={text} showArrow={false}>
46+
<a href="#" style={styles}>
47+
Left Top
48+
</a>
49+
</Tooltip>
50+
<Tooltip placement="leftBottom" overlay={text} showArrow={false}>
51+
<a href="#" style={styles}>
52+
Left Bottom
53+
</a>
54+
</Tooltip>
55+
<Tooltip placement="rightTop" overlay={text} showArrow={false}>
56+
<a href="#" style={styles}>
57+
Right Top
58+
</a>
59+
</Tooltip>
60+
<Tooltip placement="rightBottom" overlay={text} showArrow={false}>
61+
<a href="#" style={styles}>
62+
Right Bottom
63+
</a>
64+
</Tooltip>
65+
</div>
66+
<div style={rowStyle}>
67+
<Tooltip placement="topLeft" overlay={text} showArrow={false}>
68+
<a href="#" style={styles}>
69+
Top Left
70+
</a>
71+
</Tooltip>
72+
<Tooltip placement="topRight" overlay={text} showArrow={false}>
73+
<a href="#" style={styles}>
74+
Top Right
75+
</a>
76+
</Tooltip>
77+
<Tooltip placement="bottomLeft" overlay={text} showArrow={false}>
78+
<a href="#" style={styles}>
79+
Bottom Left
80+
</a>
81+
</Tooltip>
82+
<Tooltip placement="bottomRight" overlay={text} showArrow={false}>
83+
<a href="#" style={styles}>
84+
Bottom Right
85+
</a>
86+
</Tooltip>
87+
</div>
88+
</div>
89+
);
90+
91+
export default Test;

‎src/Tooltip.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export interface TooltipProps extends Pick<TriggerProps, 'onPopupAlign' | 'built
3232
keepParent?: boolean;
3333
};
3434
align?: AlignType;
35+
showArrow?: boolean;
3536
arrowContent?: React.ReactNode;
3637
id?: string;
3738
children?: React.ReactElement;
@@ -72,11 +73,13 @@ const Tooltip = (props: TooltipProps, ref) => {
7273
}
7374

7475
const getPopupElement = () => {
75-
const { arrowContent = null, overlay, id } = props;
76+
const { showArrow = true, arrowContent = null, overlay, id } = props;
7677
return [
77-
<div className={`${prefixCls}-arrow`} key="arrow">
78-
{arrowContent}
79-
</div>,
78+
showArrow && (
79+
<div className={`${prefixCls}-arrow`} key="arrow">
80+
{arrowContent}
81+
</div>
82+
),
8083
<Content
8184
key="content"
8285
prefixCls={prefixCls}

‎tests/index.test.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,4 +170,57 @@ describe('rc-tooltip', () => {
170170

171171
jest.useRealTimers();
172172
});
173+
174+
describe('showArrow', () => {
175+
it('should show tooltip arrow default', () => {
176+
const wrapper = mount(
177+
<Tooltip
178+
destroyTooltipOnHide={{ keepParent: false }}
179+
trigger={['click']}
180+
placement="left"
181+
overlay={<strong className="x-content">Tooltip content</strong>}
182+
>
183+
<div className="target">Click this</div>
184+
</Tooltip>,
185+
);
186+
wrapper.find('.target').simulate('click');
187+
expect(wrapper.find('.rc-tooltip-content').html()).toBe(
188+
'<div class="rc-tooltip-content"><div class="rc-tooltip-arrow"></div><div class="rc-tooltip-inner" role="tooltip"><strong class="x-content">Tooltip content</strong></div></div>',
189+
);
190+
});
191+
it('should show tooltip arrow when showArrow is true', () => {
192+
const wrapper = mount(
193+
<Tooltip
194+
destroyTooltipOnHide={{ keepParent: false }}
195+
trigger={['click']}
196+
placement="left"
197+
overlay={<strong className="x-content">Tooltip content</strong>}
198+
showArrow
199+
>
200+
<div className="target">Click this</div>
201+
</Tooltip>,
202+
);
203+
wrapper.find('.target').simulate('click');
204+
expect(wrapper.find('.rc-tooltip-content').html()).toBe(
205+
'<div class="rc-tooltip-content"><div class="rc-tooltip-arrow"></div><div class="rc-tooltip-inner" role="tooltip"><strong class="x-content">Tooltip content</strong></div></div>',
206+
);
207+
});
208+
it('should hide tooltip arrow when showArrow is false', () => {
209+
const wrapper = mount(
210+
<Tooltip
211+
destroyTooltipOnHide={{ keepParent: false }}
212+
trigger={['click']}
213+
placement="left"
214+
overlay={<strong className="x-content">Tooltip content</strong>}
215+
showArrow={false}
216+
>
217+
<div className="target">Click this</div>
218+
</Tooltip>,
219+
);
220+
wrapper.find('.target').simulate('click');
221+
expect(wrapper.find('.rc-tooltip-content').html()).toBe(
222+
'<div class="rc-tooltip-content"><div class="rc-tooltip-inner" role="tooltip"><strong class="x-content">Tooltip content</strong></div></div>',
223+
);
224+
});
225+
});
173226
});

0 commit comments

Comments
 (0)