vrimar / construct-ui

A Mithril.js UI library
https://vrimar.github.io/construct-ui
MIT License
287 stars 23 forks source link

Tooltip positioning broken on positioned trigger for long content #28

Closed angrytongan closed 1 year ago

angrytongan commented 4 years ago

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

vrimar commented 4 years ago

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.