Skip to content

Redesign tooltip around CSS position fixed #13355

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.

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

Merged
merged 7 commits into from
Sep 13, 2023

Conversation

mattpap
Copy link
Contributor

@mattpap mattpap commented Aug 29, 2023

This uses CSS position fixed instead of absolute, which completely removes tooltip from HTML document flow, so no overflow and thus no scrollbars. This resulted in a redesign of tooltip positioning, which in result simplified the implementation. I also made tooltip positioning to respect the viewport instead of the target element when choosing attachment position in auto mode.

Screenshot_00002

fixes #13347
fixes #11273

@mattpap mattpap added this to the 3.3 milestone Aug 29, 2023
@codecov
Copy link

codecov bot commented Aug 29, 2023

Codecov Report

Merging #13355 (278a685) into branch-3.3 (e1c1028) will not change coverage.
The diff coverage is n/a.

@@             Coverage Diff             @@
##           branch-3.3   #13355   +/-   ##
===========================================
  Coverage       92.47%   92.47%           
===========================================
  Files             315      315           
  Lines           20184    20184           
===========================================
  Hits            18665    18665           
  Misses           1519     1519           

@mattpap
Copy link
Contributor Author

mattpap commented Sep 4, 2023

This PR also allows tooltips to fit into viewport if they overflow:
image

@mattpap mattpap force-pushed the mattpap/13347_tooltip_overflow branch from 5914e8f to b97de24 Compare September 4, 2023 08:57
@bryevdv
Copy link
Member

bryevdv commented Sep 5, 2023

I also made tooltip positioning to respect the viewport instead of the target element when choosing attachment position in auto mode.

I'm not sure how I feel about this. Looking at the baseline changes, I am not sure I think swapping the sides is an improvement in all the cases where the sides swapped. I'll need to think about this a bit more .

@mattpap mattpap force-pushed the mattpap/13347_tooltip_overflow branch from b97de24 to 278a685 Compare September 12, 2023 10:10
@mattpap
Copy link
Contributor Author

mattpap commented Sep 12, 2023

I implemented a combination of the original approach respecting plot box and the new respecting the viewport.

@mattpap mattpap merged commit 584d7f6 into branch-3.3 Sep 13, 2023
@mattpap mattpap deleted the mattpap/13347_tooltip_overflow branch September 13, 2023 07:27
@mattpap mattpap mentioned this pull request Sep 13, 2023
3 tasks
Chiemezuo pushed a commit to Chiemezuo/bokeh that referenced this pull request Aug 27, 2024
* Redesign tooltip around CSS position `fixed`

This allows tooltips to be completely removed from document
flow, which allows to avoid viewport overflow/scrollbars for
large tooltips.

* Simplify CSS of tooltip's arrow

* Position arrow independently of tooltip's contents

* Allow to adjust tooltip position to fit viewport

* Update baseline images

* Respect both target and viewport bbox

* Update visual baselines
Copy link

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 25, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Long tooltip can trigger viewport scrollbars [BUG] hover tooltip is cut off when the tooltip is tall and hover near the top of the plot
2 participants