assets/css/default: Use dataset on tool-tip

Make inline and add fallback transition delay

1 files changed, 8 insertions, 7 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index d7085c4..8ac4963 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -2206,27 +2206,27 @@ diagram-container svg {
   background-color: var(--background);
 }
 
-tool-tip[reaction] {
+tool-tip[data-type="reaction"] {
   text-decoration: underline;
   -webkit-text-decoration-style: dotted;
   text-decoration-style: dotted;
   text-decoration-thickness: 0.05rem;
   cursor: default;
   position: relative;
-  display: inline-block;
+  display: inline;
 }
 
-tool-tip[reaction]:hover {
+tool-tip[data-type="reaction"]:hover {
   text-decoration-thickness: 0.1rem;
 }
 
-tool-tip[reaction]:hover img {
+tool-tip[data-type="reaction"]:hover img {
   opacity: 1;
   visibility: visible;
   width: 100%;
 }
 
-tool-tip[reaction] img {
+tool-tip[data-type="reaction"] img {
   position: absolute;
   z-index: 99;
   visibility: hidden;
@@ -2238,10 +2238,11 @@ tool-tip[reaction] img {
   transform: translateX(-50%);
   max-width: fit-content;
   border: none;
+  transition-delay: 0.5s;
 }
 
-body micro-card:first-of-type tool-tip[reaction] img,
-main micro-card:first-of-type tool-tip[reaction] img {
+body micro-card:first-of-type tool-tip[data-type="reaction"] img,
+main micro-card:first-of-type tool-tip[data-type="reaction"] img {
   bottom: 0;
   top: 100%;
 }