React-tooltip: Tooltip getting cut off when trying to render near edge of window

[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 below. 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"; }

[pnpetrov]

+1

[wwayne]

Should be supported since 3.0.7

[Olliebaba]

@wwayne - Is there a way to disable this functionality? To force the tooltip to render in the defined place with no regard to window bounds?

[joaoribeirost-rr]

@wwayne @aronhelser I would second @Olliebaba's question. Is there a way to force its position?

[sjhsieh]

A quick fix for this is to give the tooltip a className and set the max-width on it. ie:

<ReactTooltip className='tooltip-width' />

.tooltip-width {
  max-width: 95%;
}

[namlq93]

@wwayne - Is there a way to disable this functionality? To force the tooltip to render in the defined place with no regard to window bounds?

I have same question. Do you have an idea for this?