Tooltip's postion is working wrong

[Ton That Hung]

Hi Syncfusion Team,
I'm using the content and target properties of the Tooltip component, but the position is working wrong. I'm setting the position="TopCenter" but the tooltip content is shown below of button.

Result:

Expect:

Link sample: https://stackblitz.com/edit/react-9kkhrm?file=index.js
How I can get the result valid.
Thank you in advance for your help.

[Indhumathy Loganathan]

Hi Ton,

We have validated the reported query in the shared sample. You can resolve your reported issue by using `windowCollision` property to enable or disable collision between target elements of Tooltip and viewport. If this property is enabled, the tooltip will perform the collision calculation between the target elements and viewport (window) instead of the Tooltip element. Also, we have set proper height and width property to render Tooltip in proper position.

Check the modified code below.

<TooltipComponent

    content={() => <span>Let's go green to save the planet!!</span>}

    position={this.state.position}

    tabIndex={0}

    width="220px"

    height="30px"

    style={{

    display: 'block',

    position: 'absolute',

    left: 'calc( 50% - 60px)',

    top: '45%',

    }}

    windowCollision={true}

    target={`#source-mapping`}

> 

Sample: https://stackblitz.com/edit/react-9kkhrm-q4j5t4?file=index.js

Please check the shared sample and get back to us if you need any further assistance.

Regards,

Indhumathy L

[Ton That Hung]

Well, I have fixed this problem with your solution.
Thank you for your support.

[Padmini Ramamurthy]

You're welcome, Ton:)