React-tooltip: Prevent creating tooltip on other positions- show in only on top or other?

[ljzq]

I sat the top position. But if the browser window border is right above the tooltip eventable icon- the tooltip will appear below. how to prevent it and make tooltip be only on top?

[aronhelser]

Yes, this is intentional so the tooltip content is always visible. You want the tooltip to stay on top and be cut off by the edge of the browser window?

[ljzq]

@aronhelser for example - from left or right side i have some side bars, and i need the tooltip to appear over them- but t does not. The tooltip decides to appear on opposite side to the sidebar

[namlq93]

Yes, this is intentional so the tooltip content is always visible. You want the tooltip to stay on top and be cut off by the edge of the browser window?

Yes, I would like that. how can I do that?

[aronhelser]

I don't think this feature is available now. But I think the code to check the window bounds is pretty easy to isolate and put behind a flag. I can accept a PR with this functionality, please see if you can make it work!

[namlq93]

I don't think this feature is available now. But I think the code to check the window bounds is pretty easy to isolate and put behind a flag. I can accept a PR with this functionality, please see if you can make it work!

I used a simple way: override left, top position and add custom CSS to set arrowPosition:

overridePosition={({ left }, currentEvent) => {
    const target = currentEvent.target as HTMLElement;
    const targetTop = target.getBoundingClientRect().y;

    return { left, top: targetTop };
}}

:after {
        bottom: -6px !important;
        border-top-color: #fb7771 !important;
        border-top-style: solid !important;
        border-top-width: 6px !important;
        border-bottom: none !important;
        top: unset !important;
    }