Incorrect tooltip position

hakimio commented 5 years ago

Tooltip is positioned incorrectly. It's offset up and to the left: tooltip-bug

hakimio commented 5 years ago

Setting "appendToBody: true" seems to fix the offset. Anyway, "anchorToPoint" seems to be buggy as well, since it doesn't anchor to the same point every time and it's not centered horizontally.

EDIT: Changing CSS "position" from "absolute" to "relative" fixes the "anchorToPoint" option when "appendToBody" is false, and breaks the tooltip positioning when "appendToBody" is set to true.

lukbukkit commented 5 years ago

Thanks for reporting, I'm currently on vacation and I'm going to look into the problem when I'm home again.

lukbukkit commented 5 years ago

Hey, I think I've found a solution for this issue. Now the whole positioning of the tooltip is based on the display:absolute property.

You can grab a new version of this library from the /dist/ folder. It would be nice if you could try it out and if everything works correctly, I'll publish a new version of the plugin.

Thanks again!

hakimio commented 5 years ago

@LukBukkit Thanks, I'll check it out on Monday.

hakimio commented 5 years ago

@LukBukkit While it seems to work as intended when "appendToBody" is set to "true", it's completely broken when "appendToBody" is false. Maybe you should remove that option and always append to body?

You can test the plugin yourself, by checking out tooltip-plugin-usage-example branch from willsoto/ng-chartist repository. Tooltip plugin is used in the demo project's TooltipChartComponent.

Also, imho, it would be really nice if chart tooltips worked the same way they do on HighCharts - you shouldn't have to hover exactly on the tiny point to see the tooltip.

Plus few other minor things:

"anchorToPoint" should be true by default, since that's the default behavior most people would expect. [Is there actually any reason to have this config?]
The tooltip is overlapping the line chart point after increasing the point size by modifying "ct-point" CSS class "stroke-width" property.

lukbukkit commented 5 years ago

Thanks for your ideas.

While it seems to work as intended when "appendToBody" is set to "true", it's completely broken when "appendToBody" is false. Maybe you should remove that option and always append to body?
You can test the plugin yourself, by checking out tooltip-plugin-usage-example branch from willsoto/ng-chartist repository. Tooltip plugin is used in the demo project's TooltipChartComponent.

Are you using the file(s) from the /dist/ folder? My latest fixes for this issue AREN'T published on npm, so that the version 0.0.21 still contains this issue.

Also, imho, it would be really nice if chart tooltips worked the same way they do on HighCharts - you shouldn't have to hover exactly on the tiny point to see the tooltip.

Sorry, but I guess it would be a lot of work to implement a mode like this. I think they're showing the tooltip of the point which is the closest to the cursor.

"anchorToPoint" should be true by default, since that's the default behavior most people would expect. [Is there actually any reason to have this config?]

I don't know, why the plugin was built this way, but I would keep the default option set to false to prevent surprises for those who don't have set the option.

The tooltip is overlapping the line chart point after increasing the point size by modifying "ct-point" CSS class "stroke-width" property.

I guess it's planned this way, but isn't it possible to work with the z-index via css?

hakimio commented 5 years ago

Are you using the file(s) from the /dist/ folder? My latest fixes for this issue AREN'T published on npm, so that the version 0.0.21 still contains this issue.

Yes, I am using the files from dist folder. As I mentioned before, you can also test the code I am using yourself by checking out tooltip-plugin-usage-example@willsoto/ng-chartist.

I guess it's planned this way, but isn't it possible to work with the z-index via css?

The tooltip is on top of the point but the tooltips arrow is positioned too low.

lukbukkit commented 5 years ago

Yeah I can confirm your problem and trying to fix it

lukbukkit commented 5 years ago

The problem should be fixed now. I also tested the fix with your example and it works (at least for me in Chrome and Firefox). You can find it, as always, in the dist folder. But I can recommend to always use the option appendToBody:true, because it consumes a little less resources.

hakimio commented 5 years ago

@LukBukkit Looks good now. You can release a new version.

lukbukkit commented 5 years ago

A big thanks for reporting this issue and helping me testing.

The new version 0.1.1 is now released: https://www.npmjs.com/package/chartist-plugin-tooltips-updated

lukbukkit / chartist-plugin-tooltip

Incorrect tooltip position #3