Merge pull request #63 from openearth/feat/DGDS-248-information-on-ho…

…ver-dataset testing hover on dataset
openearth · Feb 6, 2020 · 69bd0ea · 69bd0ea
2 parents f86b49d + 59e0b37
commit 69bd0ea
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/components/data-set-control-menu.vue b/components/data-set-control-menu.vue
@@ -11,19 +11,24 @@
       >
         <div id="menu-control">
           <label class="data-set-control-menu__label">
-            <Icon
-              class="data-set-control-menu__icon"
-              :name="`dataset-${dataset.id}`"
-              fallback-name="placeholder"
-            />
             <UiTooltip
               v-if="dataset.toolTip"
-              class="data-set-control-menu__text unselectable"
+              class="data-set-control-menu__icon unselectable"
               :tooltip-text="dataset.toolTip"
             >
-              {{ dataset.name }}
+              <Icon
+                class="data-set-control-menu__icon"
+                :name="`dataset-${dataset.id}`"
+                fallback-name="placeholder"
+              />
             </UiToolTip>
-            <div v-else class="data-set-control-menu__text">
+            <Icon
+              v-else
+              class="data-set-control-menu__icon"
+              :name="`dataset-${dataset.id}`"
+              fallback-name="placeholder"
+            />
+            <div class="data-set-control-menu__text">
               {{ dataset.name }}
             </div>
             <div class="data-set-control-menu__control">

diff --git a/components/ui-tooltip.vue b/components/ui-tooltip.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="tooltip">
     <slot />
-    <span class="tooltiptext">
-      <VueMarkdown :source="tooltipText" />
-    </span>
+    <VueMarkdown :source="tooltipText" class="tooltiptext"/>
   </div>
 </template>
 
@@ -28,6 +26,7 @@ export default {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
+  width: calc(20rem - var(--spacing-small));
 }
 
 .tooltip .tooltiptext {
@@ -38,11 +37,16 @@ export default {
   border-radius: 4px;
   position: absolute;
   left: 0;
-  max-width: 220px;
   z-index: 1;
-  top: 100%;
+  /* placement just half a spacing (small) under the ion (spacin default) */
+  top: calc(var(--spacing-default) + 0.5 * var(--spacing-small));
   word-wrap: break-word;
-  text-align: center;
+  text-align: left;
+}
+.tooltiptext {
+  /* set the width to the same with as being used in the panel, but with a small
+  spacing and 4px of padding left for the tooltip rounding */
+  width: calc(20rem - 2 * var(--spacing-small) - 8px);
 }
 
 .tooltip:hover .tooltiptext {