From d7b9fa01065a1c87e1a3e5070647035845dcccd1 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Thu, 11 Apr 2019 17:03:06 +0200
Subject: [PATCH] Make tooltip wrappable

---
 client/src/components/HelpfulTooltip.vue      | 26 +++++++++++-------
 .../portfolio/NewProjectEntryWizard.vue       | 27 ++++++++++---------
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/client/src/components/HelpfulTooltip.vue b/client/src/components/HelpfulTooltip.vue
index c8329d4d..b3a9e9d1 100644
--- a/client/src/components/HelpfulTooltip.vue
+++ b/client/src/components/HelpfulTooltip.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="helpful-tooltip">
     <info-icon class="helpful-tooltip__icon"></info-icon>
-    <div class="helpful-tooltip__text">
+    <div class="helpful-tooltip__tooltip">
+      <div class="helpful-tooltip__text">
         {{text}}
+      </div>
     </div>
   </div>
 </template>
@@ -32,25 +34,30 @@
       fill: $color-grey;
     }
 
-    &__text {
-      display: none;
+    &__tooltip {
+      visibility: hidden;
       position: absolute;
       left: 30px;
       top: 0px;
-      white-space: nowrap;
+      width: 400px;
+    }
+
+    &__text {
+      display: inline-table;
+      width: auto;
+
       background-color: $color-white;
       border: 1px solid $color-grey;
       border-radius: 5px;
       padding: $small-spacing;
       @include small-text;
 
-
       &::before {
         content: '';
         position: absolute;
         left: 0;
-        top: 16px;
-        margin-left: -2px;
+        top: 18px;
+        margin-left: -1px;
         border-left: 1px solid $color-grey;
         border-top: 1px solid $color-grey;
         background-color: $color-white;
@@ -58,10 +65,11 @@
         height: 10px;
         transform: rotate(-45deg) translateY(-50%);
       }
+
     }
 
-    &:hover &__text {
-      display: grid;
+    &:hover &__tooltip {
+      visibility: visible;
     }
   }
 </style>
diff --git a/client/src/components/portfolio/NewProjectEntryWizard.vue b/client/src/components/portfolio/NewProjectEntryWizard.vue
index e4d60ad8..dfc2da79 100644
--- a/client/src/components/portfolio/NewProjectEntryWizard.vue
+++ b/client/src/components/portfolio/NewProjectEntryWizard.vue
@@ -1,11 +1,14 @@
 <template>
   <modal :hide-header="true">
     <div class="project-entry-modal">
-      <text-form-with-help-text title="Tätigkeit" :value="activity" @change="activity = $event" help-text="Hilfetext für Tätigkeit">
+      <text-form-with-help-text title="Tätigkeit" :value="activity" @change="activity = $event"
+                                help-text="Hilfetext für Tätigkeit">
       </text-form-with-help-text>
-      <text-form-with-help-text title="Reflexion" :value="reflection" @change="reflection = $event" help-text="Hilfetext für Reflexion">
+      <text-form-with-help-text title="Reflexion" :value="reflection" @change="reflection = $event"
+                                help-text="Hilfetext für Reflexion">
       </text-form-with-help-text>
-      <text-form-with-help-text title="Nächste Schritte" :value="nextSteps" @change="nextSteps = $event" help-text="Hilfetext für Nächste Schritte">
+      <text-form-with-help-text title="Nächste Schritte" :value="nextSteps" @change="nextSteps = $event"
+                                help-text="Hilfetext für Nächste Schritte Hilfetext für Nächste Schritte Hilfetext für Nächste Schritte Hilfetext für Nächste Schritte">
       </text-form-with-help-text>
     </div>
     <div slot="footer">
@@ -53,15 +56,15 @@
           },
           update: (store, {data: {addProjectEntry: {projectEntry}}}) => {
             const query = PROJECT_QUERY;
-              const variables = {slug: this.slug};
-              const data = store.readQuery({query, variables});
-              if (data.project && data.project.entries) {
-                data.project.entries.edges.unshift({
-                  node: projectEntry,
-                  __typename: 'ProjectEntryNode'
-                });
-                store.writeQuery({query, variables, data});
-              }
+            const variables = {slug: this.slug};
+            const data = store.readQuery({query, variables});
+            if (data.project && data.project.entries) {
+              data.project.entries.edges.unshift({
+                node: projectEntry,
+                __typename: 'ProjectEntryNode'
+              });
+              store.writeQuery({query, variables, data});
+            }
           }
 
         }).then(() => {