imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve tooltip positioning

Browse source 
Signed-off-by: Michael Weimann <michaelw@matrix.org>
This commit is contained in:
Michael Weimann 2022-05-09 15:58:16 +02:00 • committed by Michael Weimann
parent 1e73184b78
commit 7ed3089434
16 changed files with 112 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

19
test/components/views/elements/TooltipTarget-test.tsx
View file

@ -30,7 +30,6 @@ describe('<TooltipTarget />', () => {
"className": 'test className',
"tooltipClassName": 'test tooltipClassName',
"label": 'test label',
"yOffset": 1,
"alignment": Alignment.Left,
"id": 'test id',
'data-test-id': 'test',
@ -64,13 +63,17 @@ describe('<TooltipTarget />', () => {
expect(getVisibleTooltip()).toBeFalsy();
});
it('displays tooltip on mouseover', () => {
const wrapper = getComponent();
act(() => {
Simulate.mouseOver(wrapper);
});
expect(getVisibleTooltip()).toMatchSnapshot();
});
for (const alignment in Alignment) {
if (isNaN(Number(alignment))) {
it(`displays ${alignment} aligned tooltip on mouseover`, () => {
const wrapper = getComponent({ alignment: Alignment[alignment] });
act(() => {
Simulate.mouseOver(wrapper);
});
expect(getVisibleTooltip()).toMatchSnapshot();
});
}
}
it('hides tooltip on mouseleave', () => {
const wrapper = getComponent();

76
test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap
View file

@ -1,9 +1,81 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<TooltipTarget /> displays tooltip on mouseover 1`] = `
exports[`<TooltipTarget /> displays Bottom aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
style="right: 1024px; top: -26px; display: block;"
style="top: 6px; left: 0px; transform: translate(-50%); display: block;"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays InnerBottom aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
style="top: -50px; left: 0px; transform: translate(-50%); display: block;"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Left aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
style="right: 1030px; top: 0px; transform: translateY(-50%); display: block;"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Natural aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
style="left: 6px; top: 0px; transform: translateY(-50%); display: block;"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Right aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
style="left: 6px; top: 0px; transform: translateY(-50%); display: block;"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Top aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
style="top: -6px; left: 0px; transform: translate(-50%, -100%); display: block;"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays TopRight aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
style="top: -6px; right: 1024px; transform: translateY(-100%); display: block;"
>
<div
class="mx_Tooltip_chevron"