Skip to content

Commit 358d42e

Browse files
liyuan-mengliyuan-meng
committed
feat: [Tooltip] 添加 defaultPlacement 属性，在 placement为auto时，配置默认位置
1 parent 6c59106 commit 358d42e

5 files changed

Lines changed: 46 additions & 24 deletions

File tree

‎src/components/c-table/js/rowTooltip.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,8 @@ class RowTooltip extends Component {
6060
tooltipEle,
6161
checkboxEle || radioEle,
6262
'top-left',
63+
undefined,
64+
'top',
6365
);
6466

6567
const isInModal = document.querySelector(`.${prefixCls}-modal-mask`);

‎src/components/select/views/search/single-search.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export default function SingleSearch({
103103
{getSelectedLabel()}
104104
</span>
105105
{currentSelectItem?.[selectInfoKey] && (
106-
<Tooltip theme="light" content={currentSelectItem?.[selectInfoKey]}>
106+
<Tooltip theme="light" content={currentSelectItem?.[selectInfoKey]} placement="auto" defaultPlacement="right">
107107
<Icon type="question-circle-solid" style={{ color: 'rgba(0, 0, 0, 0.25)', marginLeft: 4 }} />
108108
</Tooltip>
109109
)}

‎src/components/tooltip/index.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,20 @@ Tooltip.propTypes = {
214214
`${CONFIG_PLACE.right}-${CONFIG_PLACE.top}`,
215215
`${CONFIG_PLACE.right}-${CONFIG_PLACE.bottom}`,
216216
]),
217+
defaultPlacement: PropTypes.oneOf([
218+
CONFIG_PLACE.top,
219+
`${CONFIG_PLACE.top}-${CONFIG_PLACE.left}`,
220+
`${CONFIG_PLACE.top}-${CONFIG_PLACE.right}`,
221+
CONFIG_PLACE.bottom,
222+
`${CONFIG_PLACE.bottom}-${CONFIG_PLACE.left}`,
223+
`${CONFIG_PLACE.bottom}-${CONFIG_PLACE.right}`,
224+
CONFIG_PLACE.left,
225+
`${CONFIG_PLACE.left}-${CONFIG_PLACE.top}`,
226+
`${CONFIG_PLACE.left}-${CONFIG_PLACE.bottom}`,
227+
CONFIG_PLACE.right,
228+
`${CONFIG_PLACE.right}-${CONFIG_PLACE.top}`,
229+
`${CONFIG_PLACE.right}-${CONFIG_PLACE.bottom}`,
230+
]),
217231
theme: PropTypes.oneOf([
218232
CONFIG_THEME.dark,
219233
CONFIG_THEME.light,
@@ -237,6 +251,7 @@ Tooltip.defaultProps = {
237251
trigger: 'hover',
238252
visible: undefined,
239253
placement: CONFIG_PLACE.auto,
254+
defaultPlacement: CONFIG_PLACE.top,
240255
theme: CONFIG_THEME.dark,
241256
className: '',
242257
overlayStyle: {},

‎src/components/tooltip/index.md‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,24 @@ group:
1717

1818
### API
1919

20-
| 参数 | 说明 | 类型 | 默认值 |
21-
|-----------------|-------------------------------------------------------------------------------------------------------------------------------------------------------| -------- | ------------- |
22-
| content | 内容（可以为任意一段 html 内容） | string | |
23-
| theme | 主题, 可选 `dark` `light` `error` | string | dark |
24-
| trigger | 触发方式 `hover` `click` | string | hover |
25-
| visible | 用于手动控制浮层显隐 | boolean | undefined |
26-
| control | 配置成true，结合visible使用，实现手动控制浮层显隐 | boolean | false |
27-
| onVisibleChange | 显示隐藏的回调 | (visible: boolean) => void | () => {} |
28-
| container | <del>渲染节点，默认渲染到 body 上(如果指定容器，将会给指定容器添加 position:relative)，<b style="color: red">已废弃</b></del> | function | document.body |
29-
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：毫秒 | number | 1 |
30-
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：毫秒 | number | 1 |
31-
| placement | 气泡框位置，可选 `auto` `top` `left` `right` `bottom` `top-left` `top-right` `bottom-left` `bottom-right` `left-top` `left-bottom` `right-top` `right-bottom` | string | auto |
32-
| className | 设置类样式 | string | '' |
33-
| overlayStyle | 自定义卡片样式 | object | {} |
34-
| alwaysShow | 设置 visible 为 true 后，点击其他位置，tooltip 不消失 | bool | false |
35-
| showArrow | 配置箭头的显隐，默认为true | bool | false |
36-
| scrollContainer | 设置滚动根节点， 代码根据此根节点计算提示语的偏移量 | DOM | document.body |
20+
| 参数 | 说明 | 类型 | 默认值 |
21+
|------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -------- | ------------- |
22+
| content | 内容（可以为任意一段 html 内容） | string | |
23+
| theme | 主题, 可选 `dark` `light` `error` | string | dark |
24+
| trigger | 触发方式 `hover` `click` | string | hover |
25+
| visible | 用于手动控制浮层显隐 | boolean | undefined |
26+
| control | 配置成true，结合visible使用，实现手动控制浮层显隐 | boolean | false |
27+
| onVisibleChange | 显示隐藏的回调 | (visible: boolean) => void | () => {} |
28+
| container | <del>渲染节点，默认渲染到 body 上(如果指定容器，将会给指定容器添加 position:relative)，<b style="color: red">已废弃</b></del> | function | document.body |
29+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：毫秒 | number | 1 |
30+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：毫秒 | number | 1 |
31+
| placement | 气泡框位置，可选 `auto` `top` `left` `right` `bottom` `top-left` `top-right` `bottom-left` `bottom-right` `left-top` `left-bottom` `right-top` `right-bottom` | string | auto |
32+
| defaultPlacement | placement 设置为 `auto` 时候，气泡框默认位置，可选 `top` `left` `right` `bottom` `top-left` `top-right` `bottom-left` `bottom-right` `left-top` `left-bottom` `right-top` `right-bottom` | string | auto |
33+
| className | 设置类样式 | string | '' |
34+
| overlayStyle | 自定义卡片样式 | object | {} |
35+
| alwaysShow | 设置 visible 为 true 后，点击其他位置，tooltip 不消失 | bool | false |
36+
| showArrow | 配置箭头的显隐，默认为true | bool | false |
37+
| scrollContainer | 设置滚动根节点， 代码根据此根节点计算提示语的偏移量 | DOM | document.body |
3738

3839
### 代码演示
3940

‎src/components/tooltip/toolView.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,14 @@ function getScrollOffset(ele, scrollContainer = document.body, type) {
4949
}
5050

5151
// 获取方向
52-
function getDirection(tooltip, target, placement) {
52+
function getDirection(tooltip, target, placement, defaultPlacement = CONFIG_PLACE.top) {
5353
const { top, left } = getAbsPosition(target);
5454
const targetRect = target.getBoundingClientRect();
5555

56-
let main = 'top';
57-
let vice = 'center';
56+
const [p1, p2] = defaultPlacement?.split('-')
57+
58+
let main = p1 || 'top';
59+
let vice = p2 || 'center';
5860

5961
if (placement === 'auto') {
6062
if (top - tooltip.offsetHeight < top - targetRect.top) {
@@ -78,12 +80,13 @@ export function getTooltipPositionInBody(
7880
target,
7981
placement,
8082
scrollContainer,
83+
defaultPlacement = CONFIG_PLACE.top,
8184
) {
8285
const { offsetWidth, offsetHeight } = tooltip;
8386
const { left, top, right, bottom, width, height } = getAbsPosition(target);
8487

8588
const style = {};
86-
const [main, vice] = getDirection(tooltip, target, placement);
89+
const [main, vice] = getDirection(tooltip, target, placement, defaultPlacement);
8790

8891
switch (main) {
8992
case CONFIG_PLACE.top:
@@ -144,7 +147,7 @@ export default class ToolView extends Component {
144147
timer = null;
145148

146149
componentDidMount() {
147-
const { placement, target, scrollContainer } = this.props;
150+
const { placement, defaultPlacement, target, scrollContainer } = this.props;
148151
const tooltip = this.tipRef.current;
149152

150153
setTimeout(() => {
@@ -155,8 +158,9 @@ export default class ToolView extends Component {
155158
target,
156159
placement,
157160
scrollContainer,
161+
defaultPlacement,
158162
),
159-
dir: getDirection(tooltip, target, placement).join('-'),
163+
dir: getDirection(tooltip, target, placement, defaultPlacement).join('-'),
160164
},
161165
() => this.setState({ show: true }),
162166
);

0 commit comments

Comments
 (0)