feat(tooltip): anchored/fixed position

[markov00]

Summary

Adding the prop stickTo to the tooltip settings to specify where to stick the tooltip respective to the cursor.

Apr-15-2021.17-26-32.mp4

fix #921

Checklist

Delete any items that are not applicable to this PR.

• Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
• Proper documentation or storybook story was added for features that require explanation or tutorials
• Unit tests were updated or added to match the most common scenarios

[codecov-commenter]

Codecov Report

Merging #1122 (be1a8b1) into master (c1b59f2) will decrease coverage by 0.01%.
The diff coverage is 25.00%.

@@            Coverage Diff             @@
##           master    #1122      +/-   ##
==========================================
- Coverage   72.26%   72.25%   -0.02%     
==========================================
  Files         387      404      +17     
  Lines       12021    11582     -439     
  Branches     2629     2363     -266     
==========================================
- Hits         8687     8368     -319     
+ Misses       3309     3091     -218     
- Partials       25      123      +98     

Flag	Coverage Δ
unittests	?

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
src/components/portal/types.ts	100.00% <ø> (ø)
src/specs/settings.tsx	90.00% <ø> (-0.33%)	⬇️
.../chart_types/xy_chart/crosshair/crosshair_utils.ts	74.07% <16.66%> (+0.58%)	⬆️
...s/xy_chart/state/selectors/get_tooltip_position.ts	72.22% <50.00%> (-2.78%)	⬇️
src/state/selectors/get_legend_items_labels.ts	50.00% <0.00%> (-50.00%)	⬇️
src/utils/dimensions.ts	71.42% <0.00%> (-28.58%)	⬇️
src/components/no_results.tsx	50.00% <0.00%> (-25.00%)	⬇️
src/chart_types/xy_chart/utils/panel_utils.ts	72.72% <0.00%> (-19.59%)	⬇️
src/components/error_boundary/errors.ts	50.00% <0.00%> (-16.67%)	⬇️
src/chart_types/xy_chart/rendering/point_style.ts	87.50% <0.00%> (-12.50%)	⬇️
... and 222 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c1b59f2...be1a8b1. Read the comment docs.

[nickofthyme]

LGTM. Tested locally and works great.

One thing that may be confusing is that the offset is relative to the placement and not stickTo. So if stickTo = 'top' and placement = 'rightStart' with offset = 50 you get this...

Where there is no offset from the top. I think this is the correct way of doing it but people might get confused.

[markov00]

One thing that may be confusing is that the offset is relative to the placement and not stickTo. So if stickTo = 'top' and placement = 'rightStart' with offset = 50 you get this...

@nickofthyme you are right, probably we should prefix the offset prop with something like placementOffset to be more clear

[nickofthyme]

🎉 This PR is included in version 29.1.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀