ant-design/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap

1225 lines
26 KiB
Plaintext
Raw Normal View History

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/tooltip/demo/arrow-point-at-center.md extend context correctly 1`] = `
Array [
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Align edge / 边缘对齐
</span>
</button>,
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Prompt Text
</div>
</div>
</div>
</div>,
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Arrow points to center / 箭头指向中心
</span>
</button>,
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Prompt Text
</div>
</div>
</div>
</div>,
]
`;
exports[`renders ./components/tooltip/demo/auto-adjust-overflow.md extend context correctly 1`] = `
<div
style="overflow: hidden; position: relative; padding: 24px; border: 1px solid #e9e9e9;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Adjust automatically / 自动调整
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Prompt Text
</div>
</div>
</div>
</div>
<br />
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Ignore / 不处理
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Prompt Text
</div>
</div>
</div>
</div>
<div
style="position: absolute; top: 0px; left: 0px; width: 100%;"
/>
<div
style="position: absolute; top: 0px; left: 0px; width: 100%;"
/>
</div>
`;
exports[`renders ./components/tooltip/demo/basic.md extend context correctly 1`] = `
Array [
<span>
Tooltip will show on mouse enter.
</span>,
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
prompt text
</div>
</div>
</div>
</div>,
]
`;
exports[`renders ./components/tooltip/demo/colorful.md extend context 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 ant-btn-default"
type="button"
>
<span>
pink
</span>
</button>
<div>
<div
class="ant-tooltip ant-tooltip-pink ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
red
</span>
</button>
<div>
<div
class="ant-tooltip ant-tooltip-red ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
yellow
</span>
</button>
<div>
<div
class="ant-tooltip ant-tooltip-yellow ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
orange
</span>
</button>
<div>
<div
class="ant-tooltip ant-tooltip-orange ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
cyan
</span>
</button>
<div>
<div
class="ant-tooltip ant-tooltip-cyan ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
green
</span>
</button>
<div>
<div
class="ant-tooltip ant-tooltip-green ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
blue
</span>
</button>
<div>
<div
class="ant-tooltip ant-tooltip-blue ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
purple
</span>
</button>
<div>
<div
class="ant-tooltip ant-tooltip-purple ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
geekblue
</span>
</button>
<div>
<div
class="ant-tooltip ant-tooltip-geekblue ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
magenta
</span>
</button>
<div>
<div
class="ant-tooltip ant-tooltip-magenta ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
volcano
</span>
</button>
<div>
<div
class="ant-tooltip ant-tooltip-volcano ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
gold
</span>
</button>
<div>
<div
class="ant-tooltip ant-tooltip-gold ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
lime
</span>
</button>
<div>
<div
class="ant-tooltip ant-tooltip-lime ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
prompt text
</div>
</div>
</div>
</div>
</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 ant-btn-default"
type="button"
>
<span>
#f50
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
style="--antd-arrow-background-color: #f50;"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
style="background: rgb(255, 85, 0);"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
#2db7f5
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
style="--antd-arrow-background-color: #2db7f5;"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
style="background: rgb(45, 183, 245);"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
#87d068
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
style="--antd-arrow-background-color: #87d068;"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
style="background: rgb(135, 208, 104);"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
#108ee9
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
style="--antd-arrow-background-color: #108ee9;"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
style="background: rgb(16, 142, 233);"
>
prompt text
</div>
</div>
</div>
</div>
</div>,
]
`;
exports[`renders ./components/tooltip/demo/destroy-tooltip-on-hide.md extend context correctly 1`] = `
Array [
<span>
Tooltip will destroy when hidden.
</span>,
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
prompt text
</div>
</div>
</div>
</div>,
]
`;
exports[`renders ./components/tooltip/demo/placement.md extend context correctly 1`] = `
<div
class="demo"
>
<div
style="margin-left: 70px; white-space: nowrap;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
TL
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
<span>
prompt text
</span>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Top
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
<span>
prompt text
</span>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
TR
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
<span>
prompt text
</span>
</div>
</div>
</div>
</div>
</div>
<div
style="width: 70px; float: left;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
LT
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
<span>
prompt text
</span>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Left
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
<span>
prompt text
</span>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
LB
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
<span>
prompt text
</span>
</div>
</div>
</div>
</div>
</div>
<div
style="width: 70px; margin-left: 304px;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
RT
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
<span>
prompt text
</span>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Right
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
<span>
prompt text
</span>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
RB
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
<span>
prompt text
</span>
</div>
</div>
</div>
</div>
</div>
<div
style="margin-left: 70px; clear: both; white-space: nowrap;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
BL
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
<span>
prompt text
</span>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Bottom
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
<span>
prompt text
</span>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
BR
</span>
</button>
<div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0;"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
<span>
prompt text
</span>
</div>
</div>
</div>
</div>
</div>
</div>
`;