fix: add title hover

HerringtonDarkholme · HerringtonDarkholme · commit ee9f8aead9c6 · 2025-02-16T00:52:50.000-05:00
diff --git a/website/src/components/Playground.vue b/website/src/components/Playground.vue
@@ -149,4 +149,56 @@ let codeMode = shallowRef('code')
     pointer-events: none;
   }
 }
+</style>
+
+<style>
+@media only screen and (min-width: 780px) {
+  .playground [data-title] {
+    position: relative;
+  }
+
+  .playground [data-title]:after {
+    content: attr(data-title);
+    position: absolute;
+    color: var(--vp-c-white);
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 0.25em 0.5em;
+    font-size: 10px;
+    width: max-content;
+    opacity: 0;
+    transition: 0.2s;
+    border-radius: 5px;
+    pointer-events: none;
+  }
+  .playground [data-title]::before {
+    position: absolute;
+    width: 0;
+    height: 0;
+    display: block;
+    border: 5px solid transparent;
+    content: '';
+    opacity: 0;
+    transition: 0.2s;
+    pointer-events: none;
+  }
+  .playground [title-left]::before {
+    left: -10px;
+    bottom: 50%;
+    transform: translateY(50%);
+    border-left-color: rgba(0, 0, 0, 0.5);
+  }
+  .playground [title-left]:after {
+    left: -10px;
+    bottom: 50%;
+    transform: translate(-100%, 50%);
+  }
+
+  .dark .playground [data-title]::after {
+    color: var(--vp-c-brand-1);
+  }
+
+  .playground [data-title]:hover::after, .playground [data-title]:hover::before {
+    opacity: 1;
+  }
+}
 </style>
diff --git a/website/src/components/SelectLang.vue b/website/src/components/SelectLang.vue
@@ -8,15 +8,22 @@ const lang = defineModel<string>({
   required: true,
 })
 
-const version = computed(() => {
-  return versions[lang.value]
+const versionText = computed(() => {
+  const ver = versions[lang.value]
+  return ver ? `Parser version ${ver}` : 'No parser version info'
 })
 </script>
 
 <template>
   <div class="selector">
-    <span v-if="version" :title="`Parser version ${version}`">ⓘ </span>
-    Language:
+    <span
+      class="parser-icon"
+      title-left
+      :data-title="versionText"
+    >
+      ⓘ
+      Language:
+    </span>
     <select v-model="lang">
       <option
         class="selector-option-text"
@@ -48,4 +55,7 @@ select {
     display: none;
   }
 }
+.parser-icon {
+  cursor: help;
+}
 </style>
diff --git a/website/src/components/Toolbars.vue b/website/src/components/Toolbars.vue
@@ -22,7 +22,7 @@ async function onShare() {
 
 <template>
   <div class="toolbars">
-    <button class="floating" data-title="Copy your code URL to share!" @click="onShare">
+    <button class="floating" data-title="Copy your code URL to share!" title-left @click="onShare">
       <Share style="width: 24px; height: 24px;"/>
     </button>
     <button
@@ -65,35 +65,6 @@ async function onShare() {
   color: var(--vp-c-brand);
 }
 
-@media only screen and (min-width: 780px) {
-  [data-title] {
-    position: relative;
-  }
-
-  [data-title]:after {
-    content: attr(data-title);
-    position: absolute;
-    left: -10%;
-    bottom: 50%;
-    color: var(--vp-c-white);
-    background-color: rgba(0, 0, 0, 0.5);
-    padding: 0.25em 0.5em;
-    font-size: 10px;
-    width: max-content;
-    opacity: 0;
-    transform: translate(-100%, 50%);
-    transition: 0.2s;
-    border-radius: 5px;
-  }
-
-  .dark [data-title]:after {
-    color: var(--vp-c-brand-1);
-  }
-
-  [data-title]:hover:after {
-    opacity: 1;
-  }
-}
 .switch {
   display: none;
   border-radius: 5px 5px 0px 0px;
