🐛 Re: #232 - Fix tooltip arrow placement + other improvments

src/components/Workspace/SideBarItem.vue

@@ -33,10 +33,7 @@ export default {
         disabled: !this.title,
         content: this.title,
         trigger: 'hover focus',
-        hideOnTargetClick: true,
-        html: false,
-        placement: 'right-start',
-        delay: { show: 800, hide: 1000 },
+        placement: 'bottom-end',
       },
     };
   },

src/main.js

@@ -18,12 +18,12 @@ import serviceWorker from '@/utils/InitServiceWorker'; // Service worker initial
 import clickOutside from '@/utils/ClickOutside';      // Directive for closing popups, modals, etc
 import { messages } from '@/utils/languages';         // Language texts
 import ErrorReporting from '@/utils/ErrorReporting';  // Error reporting initializer (off)
-import { toastedOptions, language as defaultLanguage } from '@/utils/defaults'; // Defaults
+import { toastedOptions, tooltipOptions, language as defaultLanguage } from '@/utils/defaults';
 import { isKeycloakEnabled, getKeycloakConfig } from '@/utils/Auth'; // Keycloak auth config
 
 // Initialize global Vue components
 Vue.use(VueI18n);
-Vue.use(VTooltip);
+Vue.use(VTooltip, tooltipOptions);
 Vue.use(VModal);
 Vue.use(VTabs);
 Vue.use(Toasted, toastedOptions);

src/styles/dimensions.scss

@@ -26,4 +26,8 @@
 
   /* Workspace View */
   --side-bar-width: 3.5rem; // The width of the sidebar
+
+  --tooltip-arrow-size: 6px;
+  --tooltip-width: 250px;
+  --tooltip-padding: 0.2rem;
 }

src/styles/global-styles.scss

@@ -92,26 +92,77 @@ html {
 
 /* Overriding styles for tooltip component */
 .tooltip {
-  background: var(--description-tooltip-background);
-  border: 1px solid var(--description-tooltip-color);
-  border-radius: var(--curve-factor-small);
-  color: var(--description-tooltip-color);
-  padding: 0.2rem 0.5rem;
-  max-width: 250px;
+  display: block;
   z-index: 5;
+  max-width: var(--tooltip-width);
+  border: none;
+  padding: 0;
+  .tooltip-inner {
+    background: var(--description-tooltip-background);
+    border: 1px solid var(--description-tooltip-color);
+    border-radius: var(--curve-factor-small);
+    color: var(--description-tooltip-color);
+    padding: var(--tooltip-padding);
+  }
+  .tooltip-arrow {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    position: absolute;
+    margin: var(--tooltip-arrow-size);
+    border-color: transparent;
+    border-width: var(--tooltip-arrow-size);
+    z-index: 1;
+  }
+  &[x-placement^="top"] {
+    margin-bottom: var(--tooltip-arrow-size);
+    .tooltip-arrow {
+      border-bottom-width: 0;
+      border-top-color: var(--description-tooltip-color);
+      bottom: calc(-1 * var(--tooltip-arrow-size));
+      left: calc(50% - var(--tooltip-arrow-size));
+      margin: 0 var(--tooltip-arrow-size);
+    }
+  }
+  &[x-placement^="bottom"] {
+    margin-top: var(--tooltip-arrow-size);
+    .tooltip-arrow {
+      border-top-width: 0;
+      border-bottom-color: var(--description-tooltip-color);
+      top: calc(-1 * var(--tooltip-arrow-size));
+      left: calc(50% - var(--tooltip-arrow-size));
+      margin: 0 var(--tooltip-arrow-size);
+    }
+  }
+  &[x-placement^="right"] {
+    margin-left: var(--tooltip-arrow-size);
+    .tooltip-arrow {
+      border-left-width: 0;
+      border-right-color: var(--description-tooltip-color);
+      left: calc(-1 * var(--tooltip-arrow-size));
+      top: calc(50% - var(--tooltip-arrow-size));
+      margin: var(--tooltip-arrow-size) 0;
+    }
+  }
+  &[x-placement^="left"] {
+    margin-right: var(--tooltip-arrow-size);
+    .tooltip-arrow {
+      border-right-width: 0;
+      border-left-color: var(--description-tooltip-color);
+      right: calc(-1 * var(--tooltip-arrow-size));
+      top: calc(50% - var(--tooltip-arrow-size));
+      margin: var(--tooltip-arrow-size) 0;
+    }
+  }
+
+  &[aria-hidden='true'] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .15s, visibility .15s;
+  }
+  &[aria-hidden='false'] {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity .15s;
+  }
 }
-.tooltip-arrow {
-  border-width: 5px 5px 0 5px;
-  border-color: var(--description-tooltip-color);
-  border-left-color: transparent!important;
-  border-right-color: transparent!important;
-  border-bottom-color: transparent!important;
-  bottom: -11px;
-  left: calc(50% - 5px);
-  margin: 5px;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  position: absolute;
-  z-index: 3;
-}

src/utils/defaults.js

@@ -46,7 +46,6 @@ module.exports = {
   /* List of built-in themes, to be displayed within the theme-switcher dropdown */
   builtInThemes: [
     'callisto',
-    'thebe',
     'oblivion',
     'material',
     'material-dark',
@@ -57,6 +56,7 @@ module.exports = {
     'minimal-light',
     'nord',
     'nord-frost',
+    'thebe',
     'cyberpunk',
     'matrix',
     'matrix-red',
@@ -143,6 +143,17 @@ module.exports = {
     className: 'toast-message',
     iconPack: 'fontawesome',
   },
+  /* Default tooltip options */
+  tooltipOptions: {
+    defaultTrigger: 'hover focus',
+    defaultHideOnTargetClick: true,
+    autoHide: true,
+    defaultHtml: false,
+    defaultPlacement: 'auto',
+    defaultLoadingContent: 'Loading...',
+    defaultDelay: { show: 380, hide: 0 },
+    // delay: { show: 380, hide: 0 },
+  },
   /* Server location of the Backup & Sync cloud function */
   backupEndpoint: 'https://dashy-sync-service.as93.net',
   /* Available services for fetching favicon icon for user apps */
@@ -150,7 +161,6 @@ module.exports = {
     mcapi: 'https://eu.mc-api.net/v3/server/favicon/$URL',
     clearbit: 'https://logo.clearbit.com/$URL',
     faviconkit: 'https://api.faviconkit.com/$URL/64',
-    // favicongrabber: 'https://favicongrabber.com//api/grab/$URL',
     google: 'https://www.google.com/s2/favicons?sz=128&domain_url=$URL',
     allesedv: 'https://f1.allesedv.com/128/$URL',
     webmasterapi: 'https://api.webmasterapi.com/v1/favicon/yEwx0ZFs0CSPshHq/$URL',