ant-design/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
2022-10-11 21:33:29 +08:00

1274 lines
24 KiB
Plaintext

// 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"
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"
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"
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"
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>
`;
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
style="opacity:0;--antd-arrow-background-color:#f50"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
style="background:#f50"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
#2db7f5
</span>
</button>
<div>
<div
class="ant-tooltip"
style="opacity:0;--antd-arrow-background-color:#2db7f5"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
style="background:#2db7f5"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
#87d068
</span>
</button>
<div>
<div
class="ant-tooltip"
style="opacity:0;--antd-arrow-background-color:#87d068"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
style="background:#87d068"
>
prompt text
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
#108ee9
</span>
</button>
<div>
<div
class="ant-tooltip"
style="opacity:0;--antd-arrow-background-color:#108ee9"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
style="background:#108ee9"
>
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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"
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>
`;
exports[`renders ./components/tooltip/demo/render-panel.md extend context correctly 1`] = `
Array [
<div
class="ant-tooltip ant-tooltip-pure ant-tooltip-placement-top ant-tooltip-pink"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
/>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Hello, Pink Pure Panel!
</div>
</div>
</div>,
<div
class="ant-tooltip ant-tooltip-pure ant-tooltip-placement-top"
style="--antd-arrow-background-color:#f50"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
/>
<div
class="ant-tooltip-inner"
role="tooltip"
style="background:#f50"
>
Hello, Customize Color Pure Panel!
</div>
</div>
</div>,
<div
class="ant-tooltip ant-tooltip-pure ant-tooltip-placement-bottomLeft"
>
<div
class="ant-tooltip-content"
style="width:200px"
>
<div
class="ant-tooltip-arrow"
/>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Hello, Pure Panel!
</div>
</div>
</div>,
]
`;