feat: add reset hover tooltip

ast-grep · Feb 16, 2025 · 185dd66 · 185dd66
1 parent eeaf72f
commit 185dd66
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/website/src/components/Playground.vue b/website/src/components/Playground.vue
@@ -11,7 +11,7 @@ import EnvDisplay from './EnvDisplay.vue'
 import { initializeParser, useAstGrep, Mode as ModeImport } from './astGrep'
 
 // important initialization
-// await initializeParser()
+await initializeParser()
 
 const {
   state,

diff --git a/website/src/components/ResetConfig.vue b/website/src/components/ResetConfig.vue
@@ -7,7 +7,7 @@ const emits = defineEmits<{
 </script>
 
 <template>
-  <button class="reset" title="Reset your config" @click="emits('reset')">
+  <button class="reset" data-title="Reset your config" @click="emits('reset')">
     <IconReset />
   </button>
 </template>
@@ -23,4 +23,15 @@ const emits = defineEmits<{
   align-items: center;
   background: transparent;
 }
+.reset[data-title]:before {
+  left: 50%;
+  top: -8px;
+  transform: translateX(-50%);
+  border-top-color: rgba(0, 0, 0, 0.5);
+}
+[data-title]:after {
+  left: 50%;
+  top: -8px;
+  transform: translate(-80%, -100%);
+}
 </style>