Adjust the tooltip arrow and fix tooltip fading on Safari#34
Open
wr2f25 wants to merge 3 commits intoeprints:masterfrom
Open
Adjust the tooltip arrow and fix tooltip fading on Safari#34wr2f25 wants to merge 3 commits intoeprints:masterfrom
wr2f25 wants to merge 3 commits intoeprints:masterfrom
Conversation
wr2f25
changed the title
Previously the opacity transition on Safari would correctly fade the background however the text would just _appear_ at the end of the transition. This appears to be some quirk of setting visibility where the text doesn't adjust the visibility until the end of its transition. To fix this it doesn't ever set itself invisible and just only transitions into `hover` rather than transitioning both ways. However this causes an issue where they are always selectable (hanging below their name) and when you hover below the name the orcid pops up. But there is no reason to be able to select the orcid-tooltip (as you select the icon to open it) so it just disables `pointer-events`.
The positioning of the arrow was adjusted in 21bae97 to make it cross-browser consistent however this shifted it a long way away from the item being pointed to. This re-adjusts it so that the arrow points directly at the 'iD' icon and appears to work identically across Chrome, Firefox, Safari and Edge.
As a quirk of removing `visibility: hidden` the tooltip text would now be copied if you just try to select all of the names associated with an EPrint. To solve this we have to set `user-select` (and its tagged versions). In a similar vein you now also can't select the 'iD' icon as this would previously add '[ORCID logo]' to the copy-pasted text.
wr2f25
force-pushed
the
improve-tooltips
branch
from
7bf9a5b to
6b25ef1
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The arrow above the ORCID tooltip (when you hover over 'iD') was adjusted in 21bae97 to make it consistent across browsers however it also shifted it well away from the button itself (see this comment), so this moves it back while ensuring it still works across Chrome, Firefox, Safari and Edge.
When you hover over the 'iD' button there is a 0.3s opacity transition to fade the tooltip in however on Safari this wouldn't fade the text, instead that would appear jarringly at the end of the transition. This appears to be a quirk of how setting
visibilityinteracts withtransition opacityon text so to fix it I removed thevisibilitysetting in favour ofpointer-events: none(anduser-select: noneto prevent accidental copy-pasting).As a final fix this also prevents the 'iD' icon from being selected as otherwise when you copy a row of authors it adds a bunch of
[ORCID logo]strings to the copied text.