Issue with tooltip

[ranhsd]

Hi, I am trying to integrate the apex charts components in my own stenciljs project and I have some issues related to the chart tooltip:

1. The tooltip lack of style - I also integrated apex charts in my vue app and there the tooltip looked ok but here is not (please have a look on the attached image)
   

2. Tooltip position - it seems that the tooltip always stays in the same position. I also tried to set fixed.enabled to true and even modify the position property but none of them worked the tooltip is always shown under the chart and I want it to be above it.

3. Visibility issue - The first time I load the app the tooltip is hidden and it's ok. When I hover the chart I see the tooltip and them it never disappeared I tried even to create a custom tooltip and modify the tooltip options but I am always getting the same behaviour.

Can you please advise what I should do?

Thanks!

[mikaelkaron]

Do you have a reproducer I can try in something like stackblitz or similar

[ranhsd]

Hi @mikaelkaron I can try create a stencil project (something simple) and send it to you here?

what do you think?

[mikaelkaron]

Sure, that also works.

[ranhsd]

Ok, so I attached a zip of the project.
just unzip it, run npm install and then npm start and you'll see a tiny chart on the screen
If you will hover the chart you will see all the issues I wrote above

1. No styling.
2. Issue with hover
3. Tooltip position

Thanks!

sample-chart.zip

[mikaelkaron]

So I think your problem has to do with shadow dom. Try this and check if you get what you expect:

@Component({
  tag: 'p-horizontal-stack-chart',
  styleUrl: 'horizontal-stack-chart.scss',
  shadow: false,
})

and in the css

p-horizontal-stack-chart {
  display: block;
}

[ranhsd]

Hi @mikaelkaron
Thank you now everything works well!

Thanks for your quick reply :)

[mikaelkaron]

No worries, happy coding!