mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
feat(tooltip): Tooltip support colour background (#23155)
* feat(tooltip): Tooltip support colour background Closes #23127 * patch: update test case * chore: repalce h1 tag to Divider * chore: update demo
This commit is contained in:
zefeng
GitHub
parent
94edeaa02f
commit
cb2094265e
@ -485,12 +485,17 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/colorful.md correctly 1`] = `
|
||||
<div>
|
||||
<h4
|
||||
style="margin-bottom:16px"
|
||||
Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
>
|
||||
Presets:
|
||||
</h4>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Presets
|
||||
</span>
|
||||
</div>,
|
||||
<div>
|
||||
<div>
|
||||
<span
|
||||
@ -674,12 +679,17 @@ exports[`renders ./components/badge/demo/colorful.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4
|
||||
style="margin:16px 0"
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
>
|
||||
Custom:
|
||||
</h4>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Custom
|
||||
</span>
|
||||
</div>,
|
||||
<div>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
@ -736,8 +746,8 @@ exports[`renders ./components/badge/demo/colorful.md correctly 1`] = `
|
||||
#108ee9
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
|
||||
|
||||
@ -14,7 +14,7 @@ title:
|
||||
We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
|
||||
|
||||
```jsx
|
||||
import { Badge } from 'antd';
|
||||
import { Badge, Divider } from 'antd';
|
||||
|
||||
const colors = [
|
||||
'pink',
|
||||
@ -33,8 +33,8 @@ const colors = [
|
||||
];
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<h4 style={{ marginBottom: 16 }}>Presets:</h4>
|
||||
<>
|
||||
<Divider orientation="left">Presets</Divider>
|
||||
<div>
|
||||
{colors.map(color => (
|
||||
<div key={color}>
|
||||
@ -42,7 +42,7 @@ ReactDOM.render(
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<h4 style={{ margin: '16px 0' }}>Custom:</h4>
|
||||
<Divider orientation="left">Custom</Divider>
|
||||
<div>
|
||||
<Badge color="#f50" text="#f50" />
|
||||
<br />
|
||||
@ -52,7 +52,7 @@ ReactDOM.render(
|
||||
<br />
|
||||
<Badge color="#108ee9" text="#108ee9" />
|
||||
</div>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -18737,7 +18737,11 @@ exports[`ConfigProvider components Popconfirm configProvider 1`] = `
|
||||
>
|
||||
<div
|
||||
class="config-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="config-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-popover-inner"
|
||||
role="tooltip"
|
||||
@ -18817,7 +18821,11 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize large
|
||||
>
|
||||
<div
|
||||
class="config-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="config-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-popover-inner"
|
||||
role="tooltip"
|
||||
@ -18897,7 +18905,11 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize middl
|
||||
>
|
||||
<div
|
||||
class="config-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="config-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-popover-inner"
|
||||
role="tooltip"
|
||||
@ -18977,7 +18989,11 @@ exports[`ConfigProvider components Popconfirm configProvider virtual and dropdow
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -19057,7 +19073,11 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -19137,7 +19157,11 @@ exports[`ConfigProvider components Popconfirm prefixCls 1`] = `
|
||||
>
|
||||
<div
|
||||
class="prefix-Popconfirm-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="prefix-Popconfirm-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="prefix-Popconfirm-inner"
|
||||
role="tooltip"
|
||||
@ -19217,7 +19241,11 @@ exports[`ConfigProvider components Popover configProvider 1`] = `
|
||||
>
|
||||
<div
|
||||
class="config-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="config-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-popover-inner"
|
||||
role="tooltip"
|
||||
@ -19249,7 +19277,11 @@ exports[`ConfigProvider components Popover configProvider componentSize large 1`
|
||||
>
|
||||
<div
|
||||
class="config-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="config-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-popover-inner"
|
||||
role="tooltip"
|
||||
@ -19281,7 +19313,11 @@ exports[`ConfigProvider components Popover configProvider componentSize middle 1
|
||||
>
|
||||
<div
|
||||
class="config-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="config-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-popover-inner"
|
||||
role="tooltip"
|
||||
@ -19313,7 +19349,11 @@ exports[`ConfigProvider components Popover configProvider virtual and dropdownMa
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -19345,7 +19385,11 @@ exports[`ConfigProvider components Popover normal 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -19377,7 +19421,11 @@ exports[`ConfigProvider components Popover prefixCls 1`] = `
|
||||
>
|
||||
<div
|
||||
class="prefix-Popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="prefix-Popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="prefix-Popover-inner"
|
||||
role="tooltip"
|
||||
@ -22630,7 +22678,11 @@ exports[`ConfigProvider components Slider configProvider 1`] = `
|
||||
>
|
||||
<div
|
||||
class="config-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="config-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-tooltip-inner"
|
||||
role="tooltip"
|
||||
@ -22680,7 +22732,11 @@ exports[`ConfigProvider components Slider configProvider componentSize large 1`]
|
||||
>
|
||||
<div
|
||||
class="config-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="config-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-tooltip-inner"
|
||||
role="tooltip"
|
||||
@ -22730,7 +22786,11 @@ exports[`ConfigProvider components Slider configProvider componentSize middle 1`
|
||||
>
|
||||
<div
|
||||
class="config-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="config-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-tooltip-inner"
|
||||
role="tooltip"
|
||||
@ -22780,7 +22840,11 @@ exports[`ConfigProvider components Slider configProvider virtual and dropdownMat
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
@ -22830,7 +22894,11 @@ exports[`ConfigProvider components Slider normal 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
@ -22880,7 +22948,11 @@ exports[`ConfigProvider components Slider prefixCls 1`] = `
|
||||
>
|
||||
<div
|
||||
class="prefix-Slider-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="prefix-Slider-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="prefix-Slider-tooltip-inner"
|
||||
role="tooltip"
|
||||
@ -34541,7 +34613,11 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="config-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="config-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-tooltip-inner"
|
||||
role="tooltip"
|
||||
@ -34571,7 +34647,11 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="config-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="config-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-tooltip-inner"
|
||||
role="tooltip"
|
||||
@ -34601,7 +34681,11 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="config-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="config-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="config-tooltip-inner"
|
||||
role="tooltip"
|
||||
@ -34631,7 +34715,11 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
@ -34661,7 +34749,11 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
@ -34691,7 +34783,11 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="prefix-Tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="prefix-Tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="prefix-Tooltip-inner"
|
||||
role="tooltip"
|
||||
|
||||
@ -5301,7 +5301,11 @@ exports[`Locale Provider should display the text as ar 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -10324,7 +10328,11 @@ exports[`Locale Provider should display the text as az 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -15347,7 +15355,11 @@ exports[`Locale Provider should display the text as bg 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -20370,7 +20382,11 @@ exports[`Locale Provider should display the text as ca 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -25393,7 +25409,11 @@ exports[`Locale Provider should display the text as cs 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -30416,7 +30436,11 @@ exports[`Locale Provider should display the text as da 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -35439,7 +35463,11 @@ exports[`Locale Provider should display the text as de 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -40462,7 +40490,11 @@ exports[`Locale Provider should display the text as el 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -45485,7 +45517,11 @@ exports[`Locale Provider should display the text as en 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -50508,7 +50544,11 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -55531,7 +55571,11 @@ exports[`Locale Provider should display the text as es 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -60554,7 +60598,11 @@ exports[`Locale Provider should display the text as et 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -65577,7 +65625,11 @@ exports[`Locale Provider should display the text as fa 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -70600,7 +70652,11 @@ exports[`Locale Provider should display the text as fi 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -75623,7 +75679,11 @@ exports[`Locale Provider should display the text as fr 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -80646,7 +80706,11 @@ exports[`Locale Provider should display the text as fr 2`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -85669,7 +85733,11 @@ exports[`Locale Provider should display the text as he 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -90692,7 +90760,11 @@ exports[`Locale Provider should display the text as hi 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -95715,7 +95787,11 @@ exports[`Locale Provider should display the text as hr 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -100738,7 +100814,11 @@ exports[`Locale Provider should display the text as hu 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -105761,7 +105841,11 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -110784,7 +110868,11 @@ exports[`Locale Provider should display the text as id 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -115807,7 +115895,11 @@ exports[`Locale Provider should display the text as is 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -120830,7 +120922,11 @@ exports[`Locale Provider should display the text as it 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -125853,7 +125949,11 @@ exports[`Locale Provider should display the text as ja 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -130876,7 +130976,11 @@ exports[`Locale Provider should display the text as kn 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -135899,7 +136003,11 @@ exports[`Locale Provider should display the text as ko 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -140922,7 +141030,11 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -145945,7 +146057,11 @@ exports[`Locale Provider should display the text as lv 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -150968,7 +151084,11 @@ exports[`Locale Provider should display the text as mk 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -155991,7 +156111,11 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -161014,7 +161138,11 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -166037,7 +166165,11 @@ exports[`Locale Provider should display the text as nb 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -171060,7 +171192,11 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -176083,7 +176219,11 @@ exports[`Locale Provider should display the text as nl 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -181106,7 +181246,11 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -186129,7 +186273,11 @@ exports[`Locale Provider should display the text as pl 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -191152,7 +191300,11 @@ exports[`Locale Provider should display the text as pt 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -196175,7 +196327,11 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -201198,7 +201354,11 @@ exports[`Locale Provider should display the text as ro 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -206221,7 +206381,11 @@ exports[`Locale Provider should display the text as ru 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -211244,7 +211408,11 @@ exports[`Locale Provider should display the text as sk 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -216267,7 +216435,11 @@ exports[`Locale Provider should display the text as sl 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -221290,7 +221462,11 @@ exports[`Locale Provider should display the text as sr 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -226313,7 +226489,11 @@ exports[`Locale Provider should display the text as sv 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -231336,7 +231516,11 @@ exports[`Locale Provider should display the text as ta 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -236359,7 +236543,11 @@ exports[`Locale Provider should display the text as th 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -241382,7 +241570,11 @@ exports[`Locale Provider should display the text as tr 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -246405,7 +246597,11 @@ exports[`Locale Provider should display the text as uk 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -251428,7 +251624,11 @@ exports[`Locale Provider should display the text as vi 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -256451,7 +256651,11 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -261474,7 +261678,11 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
|
||||
exports[`Popconfirm rtl render component should be rendered correctly in RTL direction 1`] = `<span />`;
|
||||
|
||||
exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><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><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
|
||||
exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><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><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
|
||||
|
||||
exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><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><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
|
||||
exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><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><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
|
||||
|
||||
exports[`Popconfirm shows content for render functions 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><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><div class=\\"ant-popover-message-title\\">some-title</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
|
||||
exports[`Popconfirm shows content for render functions 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><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><div class=\\"ant-popover-message-title\\">some-title</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Popover handles empty title/content props safely 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"></div></div></div>"`;
|
||||
exports[`Popover handles empty title/content props safely 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"></div></div></div>"`;
|
||||
|
||||
exports[`Popover should be rendered correctly in RTL direction 1`] = `
|
||||
Array [
|
||||
@ -19,7 +19,11 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-popover-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
@ -39,6 +43,6 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Popover should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-title\\">code</div><div class=\\"ant-popover-inner-content\\">console.log('hello world')</div></div></div>"`;
|
||||
exports[`Popover should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-title\\">code</div><div class=\\"ant-popover-inner-content\\">console.log('hello world')</div></div></div>"`;
|
||||
|
||||
exports[`Popover shows content for render functions 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-title\\">some-title</div><div class=\\"ant-popover-inner-content\\">some-content</div></div></div>"`;
|
||||
exports[`Popover shows content for render functions 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-title\\">some-title</div><div class=\\"ant-popover-inner-content\\">some-content</div></div></div>"`;
|
||||
|
||||
@ -964,7 +964,11 @@ exports[`renders ./components/slider/demo/show-tooltip.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
|
||||
@ -64,7 +64,11 @@ exports[`Slider should render in RTL direction 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
@ -91,7 +95,11 @@ exports[`Slider should show tooltip when hovering slider handler 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
@ -113,7 +121,11 @@ exports[`Slider should show tooltip when hovering slider handler 2`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
|
||||
@ -233,7 +233,11 @@ exports[`Table.filter renders custom filter icon with right Tooltip title 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
|
||||
@ -51,6 +51,171 @@ exports[`renders ./components/tooltip/demo/basic.md correctly 1`] = `
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tooltip/demo/colorful.md correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Presets
|
||||
</span>
|
||||
</div>,
|
||||
<div>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
pink
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
red
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
yellow
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
orange
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
cyan
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
green
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
blue
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
purple
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
geekblue
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
magenta
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
volcano
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
gold
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
lime
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Custom
|
||||
</span>
|
||||
</div>,
|
||||
<div>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
#f50
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
#2db7f5
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
#87d068
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
#108ee9
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tooltip/demo/destroy-tooltip-on-hide.md correctly 1`] = `
|
||||
<span>
|
||||
Tooltip will destroy when hidden.
|
||||
|
||||
63
components/tooltip/demo/colorful.md
Normal file
63
components/tooltip/demo/colorful.md
Normal file
@ -0,0 +1,63 @@
|
||||
---
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 多彩文字提示
|
||||
en-US: Colorful Tooltip
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
我们添加了多种预设色彩的文字提示样式，用作不同场景使用。
|
||||
|
||||
## en-US
|
||||
|
||||
We preset a series of colorful Tooltip styles for use in different situations.
|
||||
|
||||
```jsx
|
||||
import { Tooltip, Button, Divider } from 'antd';
|
||||
|
||||
const colors = [
|
||||
'pink',
|
||||
'red',
|
||||
'yellow',
|
||||
'orange',
|
||||
'cyan',
|
||||
'green',
|
||||
'blue',
|
||||
'purple',
|
||||
'geekblue',
|
||||
'magenta',
|
||||
'volcano',
|
||||
'gold',
|
||||
'lime',
|
||||
];
|
||||
const customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9'];
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<Divider orientation="left">Presets</Divider>
|
||||
<div>
|
||||
{colors.map(color => (
|
||||
<Tooltip title="prompt text" color={color} key={color}>
|
||||
<Button>{color}</Button>
|
||||
</Tooltip>
|
||||
))}
|
||||
</div>
|
||||
<Divider orientation="left">Custom</Divider>
|
||||
<div>
|
||||
{customColors.map(color => (
|
||||
<Tooltip title="prompt text" color={color} key={color}>
|
||||
<Button>{color}</Button>
|
||||
</Tooltip>
|
||||
))}
|
||||
</div>
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
```css
|
||||
.ant-tag {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
```
|
||||
@ -26,6 +26,7 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
|
||||
| arrowPointAtCenter | Whether the arrow is pointed at the center of target | boolean | `false` | |
|
||||
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | `true` | |
|
||||
| defaultVisible | Whether the floating tooltip card is visible by default | boolean | `false` | |
|
||||
| color | background color | string | - |
|
||||
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | Function(triggerNode) | () => document.body | |
|
||||
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 | |
|
||||
| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 | |
|
||||
|
||||
@ -6,6 +6,7 @@ import { BuildInPlacements } from 'rc-trigger/lib/interface';
|
||||
import getPlacements, { AdjustOverflow, PlacementsConfig } from './placements';
|
||||
import { cloneElement, isValidElement } from '../_util/reactNode';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { PresetColorType, PresetColorTypes } from '../_util/colors';
|
||||
|
||||
export { AdjustOverflow, PlacementsConfig };
|
||||
|
||||
@ -38,6 +39,7 @@ export interface TooltipAlignConfig {
|
||||
export interface AbstractTooltipProps extends Partial<RcTooltipProps> {
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
color?: PresetColorType;
|
||||
placement?: TooltipPlacement;
|
||||
builtinPlacements?: BuildInPlacements;
|
||||
openClassName?: string;
|
||||
@ -71,6 +73,7 @@ const splitObject = (obj: any, keys: string[]) => {
|
||||
});
|
||||
return { picked, omitted };
|
||||
};
|
||||
const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
|
||||
|
||||
// Fix Tooltip won't hide at disabled button
|
||||
// mouse events don't trigger at disabled button in Chrome
|
||||
@ -205,6 +208,8 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
|
||||
getPopupContainer,
|
||||
getTooltipContainer,
|
||||
overlayClassName,
|
||||
color,
|
||||
overlayInnerStyle,
|
||||
} = props;
|
||||
const children = props.children as React.ReactElement<any>;
|
||||
const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
|
||||
@ -225,8 +230,16 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
|
||||
|
||||
const customOverlayClassName = classNames(overlayClassName, {
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-${color}`]: color && PresetColorRegex.test(color),
|
||||
});
|
||||
|
||||
let formattedOverlayInnerStyle;
|
||||
let arrowContentStyle;
|
||||
if (color && !PresetColorRegex.test(color)) {
|
||||
formattedOverlayInnerStyle = { ...overlayInnerStyle, background: color };
|
||||
arrowContentStyle = { background: color };
|
||||
}
|
||||
|
||||
return (
|
||||
<RcTooltip
|
||||
{...props}
|
||||
@ -239,6 +252,8 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
|
||||
visible={tempVisible}
|
||||
onVisibleChange={onVisibleChange}
|
||||
onPopupAlign={onPopupAlign}
|
||||
overlayInnerStyle={formattedOverlayInnerStyle}
|
||||
arrowContent={<span className={`${prefixCls}-arrow-content`} style={arrowContentStyle} />}
|
||||
>
|
||||
{tempVisible ? cloneElement(child, { className: childCls }) : child}
|
||||
</RcTooltip>
|
||||
|
||||
@ -28,6 +28,7 @@ title: Tooltip
|
||||
| arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | `false` | |
|
||||
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` | |
|
||||
| defaultVisible | 默认是否显隐 | boolean | false | |
|
||||
| color | 背景颜色 | string | - |
|
||||
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | Function(triggerNode) | () => document.body | |
|
||||
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
||||
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
|
||||
&::before {
|
||||
&-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -94,7 +94,7 @@
|
||||
&-placement-topRight &-arrow {
|
||||
bottom: @tooltip-distance - @tooltip-arrow-rotate-width;
|
||||
|
||||
&::before {
|
||||
&-content {
|
||||
box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
|
||||
transform: translateY(-@tooltip-arrow-rotate-width / 2) rotate(45deg);
|
||||
}
|
||||
@ -118,7 +118,7 @@
|
||||
&-placement-rightBottom &-arrow {
|
||||
left: @tooltip-distance - @tooltip-arrow-rotate-width;
|
||||
|
||||
&::before {
|
||||
&-content {
|
||||
box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
|
||||
transform: translateX(@tooltip-arrow-rotate-width / 2) rotate(45deg);
|
||||
}
|
||||
@ -142,7 +142,7 @@
|
||||
&-placement-leftBottom &-arrow {
|
||||
right: @tooltip-distance - @tooltip-arrow-rotate-width;
|
||||
|
||||
&::before {
|
||||
&-content {
|
||||
box-shadow: @tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
|
||||
transform: translateX(-@tooltip-arrow-rotate-width / 2) rotate(45deg);
|
||||
}
|
||||
@ -166,7 +166,7 @@
|
||||
&-placement-bottomRight &-arrow {
|
||||
top: @tooltip-distance - @tooltip-arrow-rotate-width;
|
||||
|
||||
&::before {
|
||||
&-content {
|
||||
box-shadow: -@tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
|
||||
transform: translateY(@tooltip-arrow-rotate-width / 2) rotate(45deg);
|
||||
}
|
||||
@ -186,4 +186,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
.generator-tooltip-preset-color(@i: length(@preset-colors)) when (@i > 0) {
|
||||
.generator-tooltip-preset-color(@i - 1);
|
||||
@color: extract(@preset-colors, @i);
|
||||
@lightColor: '@{color}-6';
|
||||
.@{tooltip-prefix-cls}-@{color} {
|
||||
.@{tooltip-prefix-cls}-inner {
|
||||
background-color: @@lightColor;
|
||||
}
|
||||
.@{tooltip-prefix-cls}-arrow {
|
||||
&-content {
|
||||
background-color: @@lightColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.generator-tooltip-preset-color();
|
||||
|
||||
@import './rtl';
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
"rc-switch": "~3.1.0",
|
||||
"rc-table": "~7.7.0",
|
||||
"rc-tabs": "~10.1.1",
|
||||
"rc-tooltip": "~4.1.0",
|
||||
"rc-tooltip": "~4.2.0",
|
||||
"rc-tree": "~3.2.0",
|
||||
"rc-tree-select": "~3.1.0",
|
||||
"rc-trigger": "~4.2.1",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user