➕ adding side options

[sejoalfaro]

Add more side options to prevent screen overflow #9

These changes allow developers to have more control over the location of the tooltip card. It's so useful to avoid the screen edges.

How does it work?

That so simple, developers can add new side options for each step choosing the position to render the tooltip card. e.g:

const steps: Step[] = [
    {
        icon: '🎉',
        title: 'Use our new side options',
        selector: '[data-onborda="step1"]',
        side: 'right-bottom', // <-- THERE IS A NEW OPTION
        content: (
            <p>
                😎 This tooltip looks so great!
            </p>
        ),
        pointerPadding: -1,
        pointerRadius: 6,
    },

What are the new side options?

• right-bottom
• right-top
• bottom-right
• bottom-left
• left-top
• left-bottom
• top-left
• top-right

e.g:

Conclusions

I hope it can be useful for someone who has problems with screen edges. This is my approach to fix it as soon as possible. In my opinion, it's easy to use, no learning curve, and looks fantastic. Maybe in the future it can be automatic.

Made with ❤️ by @sejoalfaro

[tomsaudrins]

Tested this as well, and it seems to be working as expected 👍

[sejoalfaro]

Tested this as well, and it seems to be working as expected 👍

Thank you... I hope it can be merged!

[realtydev]

looks great!

[uixmat]

Hey guys, great PR, have merged it! 🎉