Skip to content

Commit d221171

Browse files
ajunerajuner
authored
feat: tooltip support color (#3603)
* feat: tooltip support color * update
1 parent 10a5fb2 commit d221171

File tree

8 files changed

+58
-25
lines changed

8 files changed

+58
-25
lines changed

‎components/popconfirm/__tests__/__snapshots__/index.test.js.snap

+1-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22

33
exports[`Popconfirm should show overlay when trigger is clicked 1`] = `
44
<div class="ant-popover-content">
5-
<div class="ant-popover-arrow">
6-
<!---->
7-
</div>
5+
<div class="ant-popover-arrow"><span class="ant-popover-arrow-content"></span></div>
86
<div class="ant-popover-inner" role="tooltip">
97
<div class="ant-popover-inner-content">
108
<div class="ant-popover-message"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>

‎components/popover/__tests__/__snapshots__/index.test.js.snap

+2-6
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22

33
exports[`Popover should show overlay when trigger is clicked 1`] = `
44
<div class="ant-popover-content">
5-
<div class="ant-popover-arrow">
6-
<!---->
7-
</div>
5+
<div class="ant-popover-arrow"><span class="ant-popover-arrow-content"></span></div>
86
<div class="ant-popover-inner" role="tooltip">
97
<div>
108
<div class="ant-popover-title">code</div>
@@ -16,9 +14,7 @@ exports[`Popover should show overlay when trigger is clicked 1`] = `
1614

1715
exports[`Popover should show overlay when trigger is clicked 2`] = `
1816
<div class="ant-popover-content">
19-
<div class="ant-popover-arrow">
20-
<!---->
21-
</div>
17+
<div class="ant-popover-arrow"><span class="ant-popover-arrow-content"></span></div>
2218
<div class="ant-popover-inner" role="tooltip">
2319
<div>
2420
<div class="ant-popover-title">code</div>

‎components/slider/__tests__/__snapshots__/index.test.js.snap

+2-6
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,7 @@ exports[`Slider should show tooltip when hovering slider handler 1`] = `
1818
<!---->
1919
<div class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top">
2020
<div class="ant-tooltip-content">
21-
<div class="ant-tooltip-arrow">
22-
<!---->
23-
</div>
21+
<div class="ant-tooltip-arrow"><span class="ant-tooltip-arrow-content"></span></div>
2422
<div class="ant-tooltip-inner" role="tooltip">30</div>
2523
</div>
2624
</div>
@@ -46,9 +44,7 @@ exports[`Slider should show tooltip when hovering slider handler 2`] = `
4644
<!---->
4745
<div class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top" style="display: none;">
4846
<div class="ant-tooltip-content">
49-
<div class="ant-tooltip-arrow">
50-
<!---->
51-
</div>
47+
<div class="ant-tooltip-arrow"><span class="ant-tooltip-arrow-content"></span></div>
5248
<div class="ant-tooltip-inner" role="tooltip">30</div>
5349
</div>
5450
</div>

‎components/tooltip/Tooltip.tsx

+24-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { defineComponent, ExtractPropTypes, inject } from 'vue';
1+
import { defineComponent, ExtractPropTypes, inject, CSSProperties } from 'vue';
22
import VcTooltip from '../vc-tooltip';
33
import classNames from '../_util/classNames';
44
import getPlacements from './placements';
55
import PropTypes from '../_util/vue-types';
6+
import { PresetColorTypes } from '../_util/colors';
67
import {
78
hasProp,
89
getComponent,
@@ -28,6 +29,8 @@ const splitObject = (obj: any, keys: string[]) => {
2829
};
2930
const props = abstractTooltipProps();
3031

32+
const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
33+
3134
const tooltipProps = {
3235
...props,
3336
title: PropTypes.VNodeChild,
@@ -176,7 +179,13 @@ export default defineComponent({
176179

177180
render() {
178181
const { $props, $data, $attrs } = this;
179-
const { prefixCls: customizePrefixCls, openClassName, getPopupContainer } = $props;
182+
const {
183+
prefixCls: customizePrefixCls,
184+
openClassName,
185+
getPopupContainer,
186+
color,
187+
overlayClassName,
188+
} = $props;
180189
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
181190
const getPrefixCls = this.configProvider.getPrefixCls;
182191
const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
@@ -197,6 +206,16 @@ export default defineComponent({
197206
[openClassName || `${prefixCls}-open`]: sVisible,
198207
[child.props && child.props.class]: child.props && child.props.class,
199208
});
209+
const customOverlayClassName = classNames(overlayClassName, {
210+
[`${prefixCls}-${color}`]: color && PresetColorRegex.test(color),
211+
});
212+
let formattedOverlayInnerStyle: CSSProperties;
213+
let arrowContentStyle: CSSProperties;
214+
if (color && !PresetColorRegex.test(color)) {
215+
formattedOverlayInnerStyle = { backgroundColor: color };
216+
arrowContentStyle = { backgroundColor: color };
217+
}
218+
200219
const vcTooltipProps = {
201220
...$attrs,
202221
...$props,
@@ -206,6 +225,9 @@ export default defineComponent({
206225
overlay: this.getOverlay(),
207226
visible: sVisible,
208227
ref: 'tooltip',
228+
overlayClassName: customOverlayClassName,
229+
overlayInnerStyle: formattedOverlayInnerStyle,
230+
arrowContent: <span class={`${prefixCls}-arrow-content`} style={arrowContentStyle}></span>,
209231
onVisibleChange: this.handleVisibleChange,
210232
onPopupAlign: this.onPopupAlign,
211233
};

‎components/tooltip/abstractTooltipProps.ts

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export default () => ({
2222
'rightBottom',
2323
),
2424
).def('top'),
25+
color: PropTypes.string,
2526
transitionName: PropTypes.string.def('zoom-big-fast'),
2627
overlayStyle: PropTypes.object.def(() => ({})),
2728
overlayClassName: PropTypes.string,

‎components/tooltip/style/index.less

+22-5
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
background: transparent;
7474
pointer-events: none;
7575

76-
&::before {
76+
&-content {
7777
position: absolute;
7878
top: 0;
7979
right: 0;
@@ -94,7 +94,7 @@
9494
&-placement-topRight &-arrow {
9595
bottom: @tooltip-distance - @tooltip-arrow-rotate-width;
9696

97-
&::before {
97+
&-content {
9898
box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
9999
transform: translateY((-@tooltip-arrow-rotate-width / 2)) rotate(45deg);
100100
}
@@ -118,7 +118,7 @@
118118
&-placement-rightBottom &-arrow {
119119
left: @tooltip-distance - @tooltip-arrow-rotate-width;
120120

121-
&::before {
121+
&-content {
122122
box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
123123
transform: translateX((@tooltip-arrow-rotate-width / 2)) rotate(45deg);
124124
}
@@ -142,7 +142,7 @@
142142
&-placement-leftBottom &-arrow {
143143
right: @tooltip-distance - @tooltip-arrow-rotate-width;
144144

145-
&::before {
145+
&-content {
146146
box-shadow: @tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
147147
transform: translateX((-@tooltip-arrow-rotate-width / 2)) rotate(45deg);
148148
}
@@ -166,7 +166,7 @@
166166
&-placement-bottomRight &-arrow {
167167
top: @tooltip-distance - @tooltip-arrow-rotate-width;
168168

169-
&::before {
169+
&-content {
170170
box-shadow: -@tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
171171
transform: translateY((@tooltip-arrow-rotate-width / 2)) rotate(45deg);
172172
}
@@ -185,3 +185,20 @@
185185
right: @tooltip-arrow-offset-horizontal;
186186
}
187187
}
188+
189+
.generator-tooltip-preset-color(@i: length(@preset-colors)) when (@i > 0) {
190+
.generator-tooltip-preset-color(@i - 1);
191+
@color: extract(@preset-colors, @i);
192+
@lightColor: '@{color}-6';
193+
.@{tooltip-prefix-cls}-@{color} {
194+
.@{tooltip-prefix-cls}-inner {
195+
background-color: @@lightColor;
196+
}
197+
.@{tooltip-prefix-cls}-arrow {
198+
&-content {
199+
background-color: @@lightColor;
200+
}
201+
}
202+
}
203+
}
204+
.generator-tooltip-preset-color();

‎components/vc-tooltip/Content.jsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export default {
66
prefixCls: PropTypes.string,
77
overlay: PropTypes.any,
88
trigger: PropTypes.any,
9+
overlayInnerStyle: PropTypes.any,
910
},
1011
updated() {
1112
const { trigger } = this;
@@ -14,9 +15,9 @@ export default {
1415
}
1516
},
1617
render() {
17-
const { overlay, prefixCls } = this;
18+
const { overlay, prefixCls, overlayInnerStyle } = this;
1819
return (
19-
<div class={`${prefixCls}-inner`} role="tooltip">
20+
<div class={`${prefixCls}-inner`} role="tooltip" style={overlayInnerStyle}>
2021
{typeof overlay === 'function' ? overlay() : overlay}
2122
</div>
2223
);

‎components/vc-tooltip/Tooltip.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,11 @@ export default defineComponent({
2828
arrowContent: PropTypes.any.def(null),
2929
tipId: PropTypes.string,
3030
builtinPlacements: PropTypes.object,
31+
overlayInnerStyle: PropTypes.style,
3132
},
3233
methods: {
3334
getPopupElement() {
34-
const { prefixCls, tipId } = this.$props;
35+
const { prefixCls, tipId, overlayInnerStyle } = this.$props;
3536
return [
3637
<div class={`${prefixCls}-arrow`} key="arrow">
3738
{getComponent(this, 'arrowContent')}
@@ -42,6 +43,7 @@ export default defineComponent({
4243
prefixCls={prefixCls}
4344
id={tipId}
4445
overlay={getComponent(this, 'overlay')}
46+
overlayInnerStyle={overlayInnerStyle}
4547
/>,
4648
];
4749
},

0 commit comments

Comments
 (0)