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

Enhance tooltip placement #375

Closed
3 tasks
nickofthyme opened this issue Sep 13, 2019 · 1 comment · Fixed by #418
Closed
3 tasks

Enhance tooltip placement #375

nickofthyme opened this issue Sep 13, 2019 · 1 comment · Fixed by #418
Labels
enhancement New feature or request :interactions Interactions related issue released Issue released publicly

Comments

@nickofthyme
Copy link
Collaborator

Is your feature request related to a problem? Please describe.
Enhance tooltip placement to avoid janky placement especially on smaller charts.

Screen Recording 2019-09-12 at 08 59 PM

Describe the solution you'd like
Have a bounding box tooltip that jumps only when needed (i.e. beyond the chart grids, beyond chart or beyond the browser window)

Kibana Cross Issues
Add any Kibana related issues/feature requests here.

Checklist

  • this request is checked against already exist requests
  • every related Kibana issue is listed under Kibana Cross Issues list
  • kibana cross issue tag is associated to the issue if any kibana cross issue is present
@nickofthyme nickofthyme added enhancement New feature or request :interactions Interactions related issue labels Sep 13, 2019
markov00 added a commit to markov00/elastic-charts that referenced this issue Oct 15, 2019
@markov00
fix(tooltip): render tooltip on portal to avoid hidden overflows
3c05b9c 
The current tooltip was rendered inside the chart container. If the chart is rendered inside a DOM
element with an hidden overflow, then the tooltip will be cutted. I moved the tooltip element to
render on the document body through a React portal.

close elastic#375
@markov00 markov00 mentioned this issue Oct 15, 2019
Merged
5 tasks
markov00 added a commit that referenced this issue Oct 31, 2019
@markov00
fix(tooltip): render tooltip on portal to avoid hidden overflows (#418)
1c00e23 
This commit render the tooltips (crosshair and annotation) into a react-portal to avoid begin hidden by the container overflow settings. It will also enhance the current tooltip positioning reducing the jump from one position to another only if the tooltip is touching the edges of the chart.

close #375
markov00 pushed a commit that referenced this issue Oct 31, 2019
@semantic-release-bot
chore(release): 13.5.11 [skip ci]
acea2f4 
## [13.5.11](v13.5.10...v13.5.11) (2019-10-31)

### Bug Fixes

* **tooltip:** render tooltip on portal to avoid hidden overflows ([#418](#418)) ([1c00e23](1c00e23)), closes [#375](#375)
@markov00
Copy link
Member

🎉 This issue has been resolved in version 13.5.11 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label Oct 31, 2019
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this issue Feb 10, 2022
@semantic-release-bot
chore(release): 13.5.11 [skip ci]
08e6a39 
## [13.5.11](elastic/elastic-charts@v13.5.10...v13.5.11) (2019-10-31)

### Bug Fixes

* **tooltip:** render tooltip on portal to avoid hidden overflows ([opensearch-project#418](elastic/elastic-charts#418)) ([b08e689](elastic/elastic-charts@b08e689)), closes [opensearch-project#375](elastic/elastic-charts#375)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request :interactions Interactions related issue released Issue released publicly
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(tooltip): render tooltip on portal to avoid hidden overflows markov00/elastic-charts
2 participants
@markov00 @nickofthyme