We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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


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

1 Reply 1 reply marked as answer

LD LeoLavanya Dhanaraj Syncfusion Team April 26, 2023 04:10 PM UTC

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>




function onScroll(): void {

    if(tooltipObj != null) {

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






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.


Leo Lavanya Dhanaraj

Marked as answer
Live Chat Icon For mobile
Up arrow icon