Modal gets cut off when rendered near edge of page

[ggongon]

Summary:

If i set place="top", it renders the toolitp in the top position. if the tooltip will not fit above, it automatically renders at the bottom. Likewise, if i use place="right", it will position to the left if it is out of the current window dimensions.

But, if i choose place="top" but the content is too wide to fully display in the window, the left side will be rendered off-screen and there is no way for me to see the entire content of the tooltip.

Steps to reproduce:

1. create a tooltip with place="top"
2. make the tooltip width ~300px wide and position the element on the right side of the page
3. resize your window so that the tooltip will be too wide to be rendered above the element
4. when you mouseover the element, the right edge of the tooltip's content will not be visible

Expected behavior:

If (right_edge_of_tooltip > window.innerWidth) { place="left"; }

Additional notes:

[claydiffrient]

@ggongon Are you sure you filed this issue against the right project? All the details seem to be about a tooltip rather than a modal.

[ggongon]

@claydiffrient good eye. sorry about that, you're right. moving this story over to react-tooltip. thanks

[maxmatthews]

@ggongon Did you ever resolve this issue or have a link to the new story? I think I'm having the same issue and just opened this: ReactTooltip/react-tooltip#130