Display tooltip inside a container that has an overflow-y: scroll

[Alberto Torres]

Hello,

I am using the TooltipComponent to wrap a TextBoxComponent and notify that it is a required field, this Texbox is inside a form that has a certain height (500px) therefore it has an overflow-y: scroll property, the property of the tooltip opensOn is " Custom" (I must necessarily use this value for the property for some internal validations), now, when the Tooltip is displayed, it stays stuck in the center and does not follow the parent element (texbox) when I scroll (as can be seen see in the image), any ideas to solve that?

When the tooltip just appears

When the scrolling is done

[LeoLavanya Dhanaraj]

Hi Albetro,

Based on your shared details, we understand that you are facing an issue with the presence of a Tooltip in the same place even when the page is scrolled. To resolve this issue, we suggest manually closing the Tooltip using the close method when the page is scrolled.

Refer to the below demo sample and code snippet for further assistance.

Demo : https://ej2.syncfusion.com/react/demos/#/bootstrap5/tooltip/html-content

<TooltipComponent id='content' created={created.bind(this)} target="#content" ... >

    <div id="customization">

        <ButtonComponent id="content" ... >HTML Template</ButtonComponent>

    </div>

</TooltipComponent>

 

function onScroll(): void {

    if(tooltipObj != null) {

        if (document.getElementsByClassName('e-tooltip-wrap').length > 0) {

            tooltipObj.close();

        }

    }

}

 

function created(): void {

    if (document.getElementById('right-pane')) { …

        document.getElementById('right-pane').addEventListener('scroll', onScroll.bind(this));

    }

}

If we have misunderstood your query, please let us know by providing additional details, such as video footage or a pictorial representation of your requirement. Also, share the replicated issue sample or steps to replicate the issue. This information will help us better understand your requirements and provide an appropriate solution.

Regards,

Leo Lavanya Dhanaraj