From 7fb9b605968009ff7e7dba8181ee91b64fb57319 Mon Sep 17 00:00:00 2001 From: William Rose Date: Thu, 14 Aug 2025 09:07:54 +0000 Subject: [PATCH 1/3] Fix popup fade-in on Safari 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`. --- lib/static/style/auto/orcid_support.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/static/style/auto/orcid_support.css b/lib/static/style/auto/orcid_support.css index 69d621b..ffab343 100644 --- a/lib/static/style/auto/orcid_support.css +++ b/lib/static/style/auto/orcid_support.css @@ -22,8 +22,9 @@ } .orcid:hover .orcid-tooltip{ - visibility: visible; opacity: 1; + transition: opacity 0.3s; + pointer-events: all; } .orcid img{ @@ -31,13 +32,11 @@ } .orcid-tooltip{ - visibility: hidden; position: absolute; left: -85px; bottom: -35px; z-index: 1; opacity: 0; - transition: opacity 0.3s; background-color: #A6CE39; border: 1px solid #000000; white-space: pre; @@ -46,6 +45,7 @@ padding: 5px; color: #fff; border-radius: 5px; + pointer-events: none; } .orcid-tooltip::before { From b35450ea75fa44e2fc061ba775bfcec02b2e900a Mon Sep 17 00:00:00 2001 From: William Rose Date: Thu, 14 Aug 2025 09:23:01 +0000 Subject: [PATCH 2/3] Adjust positioning of tooltip arrow 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. --- lib/static/style/auto/orcid_support.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/static/style/auto/orcid_support.css b/lib/static/style/auto/orcid_support.css index ffab343..717983c 100644 --- a/lib/static/style/auto/orcid_support.css +++ b/lib/static/style/auto/orcid_support.css @@ -33,7 +33,7 @@ .orcid-tooltip{ position: absolute; - left: -85px; + left: -130px; bottom: -35px; z-index: 1; opacity: 0; @@ -51,7 +51,7 @@ .orcid-tooltip::before { content: ""; position: absolute; - top: 100%; + top: -29px; left: 50%; height: 18px; margin-left: -5px; From 6b25ef17e459ed6b4f92ceaaa16dae30283dbd97 Mon Sep 17 00:00:00 2001 From: William Rose Date: Thu, 14 Aug 2025 09:49:44 +0000 Subject: [PATCH 3/3] Prevent the tooltip text from being copied 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. --- lib/static/style/auto/orcid_support.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/lib/static/style/auto/orcid_support.css b/lib/static/style/auto/orcid_support.css index 717983c..930039b 100644 --- a/lib/static/style/auto/orcid_support.css +++ b/lib/static/style/auto/orcid_support.css @@ -29,6 +29,11 @@ .orcid img{ vertical-align: bottom; + /* Prevent its tooltip from being copied with the text */ + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } .orcid-tooltip{ @@ -45,7 +50,12 @@ padding: 5px; color: #fff; border-radius: 5px; + /* Act akin to `visibility: hidden` without actually changing visibility */ pointer-events: none; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } .orcid-tooltip::before {