Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Avoid partially hiding of chart tooltip near chart ends #1516

Closed
wants to merge 1 commit into from
Closed

Avoid partially hiding of chart tooltip near chart ends #1516

wants to merge 1 commit into from

Conversation

maxbruecken
Copy link
Contributor

Added new chart tooltip CSS classes to show tooltip without cutting near ends of the chart. This fixes #560.

@akorchev
Copy link
Collaborator

What problem does this PR solve? The linked issue doesn't help a lot.

@maxbruecken
Copy link
Contributor Author

This PR solves the problem with hiding of part of chart tooltip if the data points are near to the for example top end of chart or window. The fist screenshot shows the problem, the second one shows how the tooltip will be rendered with changes from this PR.

image

image

@akorchev
Copy link
Collaborator

Thank you for the clarification. While testing I found those issues:

  1. Doesn't seem to work in Safari
    image.
  2. The tooltip changes direction unexpectedly in some cases. Check this gif:
    change-of-direction. There is enough room for the tooltip but it still flips which I think is unexpected.

Probably the issue is the boundary check function - it checks if the tooltip is within the chart wrapper element. I think a better implementation is to check for the screen boundaries. Already done by some components (check the openPopup function).

@maxbruecken
Copy link
Contributor Author

Thank you for testing. I will check and try to fix issues you found. Unfortunately only to check screen boundaries was not enough, in some situations a part of the chart is covered by other elements with higher z-order (header, footer etc.) and thus the chart tooltip can be covered by this elements too.

@akorchev
Copy link
Collaborator

in some situations a part of the chart is covered by other elements with higher z-order (header, footer etc.) and thus the chart tooltip can be covered by this elements too.

This can't be always solved by flipping the direction alone. A 100% working solution would be to render the chart tooltip as RadzenTooltip which attaches at the <body> and overlays everything and has screen boundary detection as a built-in.

@maxbruecken
Copy link
Contributor Author

in some situations a part of the chart is covered by other elements with higher z-order (header, footer etc.) and thus the chart tooltip can be covered by this elements too.

This can't be always solved by flipping the direction alone. A 100% working solution would be to render the chart tooltip as RadzenTooltip which attaches at the <body> and overlays everything and has screen boundary detection as a built-in.

Good point, thank you. I would close this PR and try to reimplement the chart tooltip as RadzenTooltip and create a new PR later.

Should it be configurable whether to use RadzenTooltip instead of chart tooltip or should I simple replace current chart tooltip?

@akorchev
Copy link
Collaborator

Hi @maxbruecken,

Replacing the chart tooltip with RadzenTooltip would be a big task so be prepared :)

  • The chart tooltip uses styling from the current series (to set the border to be of the same color).
  • RadzenTooltip relies on an ElementReference to open. The chart tooltip uses X and Y coordinates instead.

Should it be configurable whether to use RadzenTooltip instead of chart tooltip or should I simple replace current chart tooltip?

No as it would be very hard to explain why such an option even exists. However the current look and feel and behavior should be preserved as much as possible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

LineChart Tooltip near to the browser end doesn't work
2 participants
@maxbruecken @akorchev