construct-ui icon indicating copy to clipboard operation
construct-ui copied to clipboard

Tooltip positioning broken on positioned trigger for long content

Open angrytongan opened this issue 6 years ago • 1 comments

Applying a position to a trigger in a Tooltip with content wider than the available window width results in the tooltip being mis-positioned. Positioning tested with float, absolute (below), or grid.

Latest Chrome, Mac OS X, 1.0.0. branch. Cursor was over the button when screenshot was taken.

const {
    Button,
    Tooltip,

} = CUI;

const PopoverPosition = () => {
    return {
        view: () => {
            return m(Tooltip, {
                content: `
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat.
                `,
                trigger: m(Button, {
                    style: 'position: absolute; right: 0;',
                    iconLeft: 'help-circle',
                }),
            });
        },
    };
};

document.addEventListener('DOMContentLoaded', () => {
    m.route(document.body, '/', {
        '/': PopoverPosition
    });
});

Screen Shot 2020-04-23 at 6 31 32 pm

angrytongan avatar Apr 23 '20 08:04 angrytongan

I'm unable to reproduce on Chrome v85 on Mac OS X. The latest version updated the positioning engine package (popper.js) so that might have fixed it.

vrimar avatar Jun 25 '20 04:06 vrimar