Add tooltips #9

2025-12-06 18:18:53 +08:00 · 2020-11-06 12:20:44 +01:00
parent 57c8fe5bc8
commit 7da1cb36fa
9 changed files with 158 additions and 50 deletions
--- a/src/assets/styles/tooltips.css
+++ b/src/assets/styles/tooltips.css
@@ -0,0 +1,15 @@
+.icon-tooltip {
+  visibility: hidden;
+  background-color: rgba(80, 103, 132, 0.85);
+  color: #fff;
+  text-align: center;
+  font-size: 11px;
+  padding: 0 6px;
+  line-height: 19px;;
+  position: fixed;
+  z-index: 5;
+  height: 19px;
+  border-radius: var(--border-radius-medium);
+  white-space: nowrap;
+  z-index: 999;
+}
--- a/src/components/svg/changeDb.vue
+++ b/src/components/svg/changeDb.vue
@@ -15,30 +15,18 @@
      fill="#A2B1C6"
    />
  </svg>
-  <span class="db-edit-tooltip" :style="tooltipStyle">
+  <span class="icon-tooltip" :style="tooltipStyle">
    Change database
  </span>
 </div>
 </template>

 <script>
+import tooltipMixin from '@/mixins/tooltips'
+
 export default {
  name: 'changeDbIcon',
-  data () {
-    return {
-      tooltipStyle: {}
-    }
-  },
-  methods: {
-    showTooltip (e) {
-      this.tooltipStyle = {
-        visibility: 'visible',
-        position: 'fixed',
-        top: e.clientY - 12 + 'px',
-        left: e.clientX + 12 + 'px'
-      }
-    }
-  }
+  mixins: [tooltipMixin]
 }
 </script>

@@ -50,21 +38,4 @@ export default {
 .db-edit-icon:hover path {
  fill: var(--color-accent);
 }
-.db-edit-tooltip {
-  visibility: hidden;
-  background-color: rgba(80, 103, 132, 0.75);
-  color: #fff;
-  text-align: center;
-  font-size: 11px;
-  padding: 0 6px;
-  line-height: 19px;;
-  position: fixed;
-  z-index: 5;
-  height: 19px;
-  left: 100px;
-  top: 100px;
-  border-radius: var(--border-radius-medium);
-  white-space: nowrap;
-  z-index: 999;
-}
 </style>
--- a/src/components/svg/copy.vue
+++ b/src/components/svg/copy.vue
@@ -1,12 +1,33 @@
 <template>
-  <svg @click.stop="$emit('click')" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M14.25 15.75H6V5.25H14.25V15.75ZM14.25 3.75H6C5.60218 3.75 5.22064 3.90804 4.93934 4.18934C4.65804 4.47064 4.5 4.85218 4.5 5.25V15.75C4.5 16.1478 4.65804 16.5294 4.93934 16.8107C5.22064 17.092 5.60218 17.25 6 17.25H14.25C14.6478 17.25 15.0294 17.092 15.3107 16.8107C15.592 16.5294 15.75 16.1478 15.75 15.75V5.25C15.75 4.85218 15.592 4.47064 15.3107 4.18934C15.0294 3.90804 14.6478 3.75 14.25 3.75ZM12 0.75H3C2.60218 0.75 2.22064 0.908035 1.93934 1.18934C1.65804 1.47064 1.5 1.85218 1.5 2.25V12.75H3V2.25H12V0.75Z" fill="#A2B1C6"/>
+  <span>
+    <svg
+      class="icon"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      @click.stop="$emit('click')"
+      @mouseover="showTooltip"
+      @mouseout="$set(tooltipStyle, 'visibility', 'hidden')"
+    >
+      <path
+        d="M14.25 15.75H6V5.25H14.25V15.75ZM14.25 3.75H6C5.60218 3.75 5.22064 3.90804 4.93934 4.18934C4.65804 4.47064 4.5 4.85218 4.5 5.25V15.75C4.5 16.1478 4.65804 16.5294 4.93934 16.8107C5.22064 17.092 5.60218 17.25 6 17.25H14.25C14.6478 17.25 15.0294 17.092 15.3107 16.8107C15.592 16.5294 15.75 16.1478 15.75 15.75V5.25C15.75 4.85218 15.592 4.47064 15.3107 4.18934C15.0294 3.90804 14.6478 3.75 14.25 3.75ZM12 0.75H3C2.60218 0.75 2.22064 0.908035 1.93934 1.18934C1.65804 1.47064 1.5 1.85218 1.5 2.25V12.75H3V2.25H12V0.75Z"
+        fill="#A2B1C6"
+      />
    </svg>
+    <span class="icon-tooltip" :style="tooltipStyle">
+      Duplicate query
+    </span>
+  </span>
 </template>

 <script>
+import tooltipMixin from '@/mixins/tooltips'
+
 export default {
-  name: 'CopyIcon'
+  name: 'CopyIcon',
+  mixins: [tooltipMixin]
 }
 </script>

--- a/src/components/svg/delete.vue
+++ b/src/components/svg/delete.vue
@@ -1,12 +1,33 @@
 <template>
-  <svg @click.stop="$emit('click')" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M6.75 2.25V3H3V4.5H3.75V14.25C3.75 14.6478 3.90804 15.0294 4.18934 15.3107C4.47064 15.592 4.85218 15.75 5.25 15.75H12.75C13.1478 15.75 13.5294 15.592 13.8107 15.3107C14.092 15.0294 14.25 14.6478 14.25 14.25V4.5H15V3H11.25V2.25H6.75ZM5.25 4.5H12.75V14.25H5.25V4.5ZM6.75 6V12.75H8.25V6H6.75ZM9.75 6V12.75H11.25V6H9.75Z" fill="#A2B1C6"/>
+  <span>
+    <svg
+      class="icon"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      @click.stop="$emit('click')"
+      @mouseover="showTooltip"
+      @mouseout="$set(tooltipStyle, 'visibility', 'hidden')"
+    >
+      <path
+        d="M6.75 2.25V3H3V4.5H3.75V14.25C3.75 14.6478 3.90804 15.0294 4.18934 15.3107C4.47064 15.592 4.85218 15.75 5.25 15.75H12.75C13.1478 15.75 13.5294 15.592 13.8107 15.3107C14.092 15.0294 14.25 14.6478 14.25 14.25V4.5H15V3H11.25V2.25H6.75ZM5.25 4.5H12.75V14.25H5.25V4.5ZM6.75 6V12.75H8.25V6H6.75ZM9.75 6V12.75H11.25V6H9.75Z"
+        fill="#A2B1C6"
+      />
    </svg>
+    <span class="icon-tooltip" :style="tooltipStyle">
+      Delete query
+    </span>
+  </span>
 </template>

 <script>
+import tooltipMixin from '@/mixins/tooltips'
+
 export default {
-  name: 'DeleteIcon'
+  name: 'DeleteIcon',
+  mixins: [tooltipMixin]
 }
 </script>

--- a/src/components/svg/export.vue
+++ b/src/components/svg/export.vue
@@ -1,12 +1,33 @@
 <template>
-  <svg @click.stop="$emit('click')" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M10.5 1.5H4.5C3.675 1.5 3 2.175 3 3V15C3 15.825 3.675 16.5 4.5 16.5H13.5C14.325 16.5 15 15.825 15 15V6L10.5 1.5ZM13.5 15H4.5V3H9.75V6.75H13.5V15ZM12 8.25V13.575L10.425 12L8.325 14.1L6.225 12L8.325 9.9L6.675 8.25H12Z" fill="#A2B1C6"/>
-</svg>
+  <span>
+    <svg
+      class="icon"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      @click.stop="$emit('click')"
+      @mouseover="showTooltip"
+      @mouseout="$set(tooltipStyle, 'visibility', 'hidden')"
+    >
+      <path
+        d="M10.5 1.5H4.5C3.675 1.5 3 2.175 3 3V15C3 15.825 3.675 16.5 4.5 16.5H13.5C14.325 16.5 15 15.825 15 15V6L10.5 1.5ZM13.5 15H4.5V3H9.75V6.75H13.5V15ZM12 8.25V13.575L10.425 12L8.325 14.1L6.225 12L8.325 9.9L6.675 8.25H12Z"
+        fill="#A2B1C6"
+      />
+  </svg>
+  <span class="icon-tooltip" :style="tooltipStyle">
+    Export query to file
+  </span>
+  </span>
 </template>

 <script>
+import tooltipMixin from '@/mixins/tooltips'
+
 export default {
-  name: 'ExportIcon'
+  name: 'ExportIcon',
+  mixins: [tooltipMixin]
 }
 </script>

--- a/src/components/svg/rename.vue
+++ b/src/components/svg/rename.vue
@@ -1,12 +1,33 @@
 <template>
-  <svg @click.stop="$emit('click')" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M10.545 6.75L11.25 7.455L4.44 14.25H3.75V13.56L10.545 6.75ZM13.245 2.25C13.0575 2.25 12.8625 2.325 12.72 2.4675L11.3475 3.84L14.16 6.6525L15.5325 5.28C15.825 4.9875 15.825 4.5 15.5325 4.2225L13.7775 2.4675C13.6275 2.3175 13.44 2.25 13.245 2.25ZM10.545 4.6425L2.25 12.9375V15.75H5.0625L13.3575 7.455L10.545 4.6425Z" fill="#A2B1C6"/>
+  <span>
+    <svg
+      class="icon"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      @click.stop="$emit('click')"
+      @mouseover="showTooltip"
+      @mouseout="$set(tooltipStyle, 'visibility', 'hidden')"
+    >
+      <path
+        d="M10.545 6.75L11.25 7.455L4.44 14.25H3.75V13.56L10.545 6.75ZM13.245 2.25C13.0575 2.25 12.8625 2.325 12.72 2.4675L11.3475 3.84L14.16 6.6525L15.5325 5.28C15.825 4.9875 15.825 4.5 15.5325 4.2225L13.7775 2.4675C13.6275 2.3175 13.44 2.25 13.245 2.25ZM10.545 4.6425L2.25 12.9375V15.75H5.0625L13.3575 7.455L10.545 4.6425Z"
+        fill="#A2B1C6"
+      />
    </svg>
+    <span class="icon-tooltip" :style="tooltipStyle">
+      Rename query
+    </span>
+  </span>
 </template>

 <script>
+import tooltipMixin from '@/mixins/tooltips'
+
 export default {
-  name: 'RenameIcon'
+  name: 'RenameIcon',
+  mixins: [tooltipMixin]
 }
 </script>

--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@ import '@/assets/styles/variables.css'
 import '@/assets/styles/buttons.css'
 import '@/assets/styles/tables.css'
 import '@/assets/styles/dialogs.css'
+import '@/assets/styles/tooltips.css'

 Vue.use(VuePlugin)
 Vue.use(VModal)
--- a/src/mixins/tooltips.js
+++ b/src/mixins/tooltips.js
@@ -0,0 +1,17 @@
+export default {
+  data () {
+    return {
+      tooltipStyle: {}
+    }
+  },
+  methods: {
+    showTooltip (e) {
+      this.tooltipStyle = {
+        visibility: 'visible',
+        position: 'fixed',
+        top: e.clientY - 12 + 'px',
+        left: e.clientX + 12 + 'px'
+      }
+    }
+  }
+}
--- a/src/views/MyQueries.vue
+++ b/src/views/MyQueries.vue
@@ -66,7 +66,17 @@
                      @click="toggleRow($event, query.id)"
                    />
                    <div class="name">{{ query.name }}</div>
-                    <div class="badge">Predefined</div>
+                    <div
+                      class="badge"
+                      @mouseover="showTooltip"
+                      @mouseout="$set(tooltipStyle, 'visibility', 'hidden')"
+                    >
+                      Predefined
+                      <span class="icon-tooltip" :style="tooltipStyle">
+                        Predefined queries come from the server.
+                        These queries can’t be deleted or renamed.
+                      </span>
+                    </div>
                 </div>
              </td>
              <td>
@@ -150,6 +160,7 @@ import DeleteIcon from '@/components/svg/delete'
 import CloseIcon from '@/components/svg/close'
 import TextField from '@/components/TextField'
 import CheckBox from '@/components/CheckBox'
+import tooltipMixin from '@/mixins/tooltips'
 import { nanoid } from 'nanoid'

 export default {
@@ -163,6 +174,7 @@ export default {
    TextField,
    CheckBox
  },
+  mixins: [tooltipMixin],
  data () {
    return {
      queries: [],
@@ -542,4 +554,12 @@ tbody tr.predefined:hover .badge {
 #note img {
  vertical-align: middle;
 }
+.icon-tooltip {
+  display: block;
+  width: 149px;
+  white-space: normal;
+  height: auto;
+  line-height: normal;
+  padding: 6px;
+}
 </style>