Merge pull request #393 from 1CRM/html-editor-tooltips-391

HTML Editor: Controls titles are not displayed on hover on iPad with …
1CRM · May 16, 2024 · 20c0ab7 · 20c0ab7
2 parents bea14fa + da30b44
commit 20c0ab7
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 11 deletions.
diff --git a/packages/oceanfront-html-editor/src/components/HtmlEditor.vue b/packages/oceanfront-html-editor/src/components/HtmlEditor.vue
@@ -41,15 +41,18 @@
                       v-bind="item"
                       density="3"
                     />
-                    <of-button
-                      density="3"
-                      :variant="item.variant"
-                      @click="item.click"
-                      :icon="item.icon"
-                      :title="item.title"
-                      :disabled="item.disabled"
-                      v-else
-                    />
+                    <div class="editor-action" v-else>
+                      <div class="tooltip">
+                        <div class="tooltip-text">{{ item.title }}</div>
+                      </div>
+                      <of-button
+                        density="3"
+                        :variant="item.variant"
+                        @click="item.click"
+                        :icon="item.icon"
+                        :disabled="item.disabled"
+                      />
+                    </div>
                   </template>
                 </div>
               </template>

diff --git a/packages/oceanfront-html-editor/src/scss/index.scss b/packages/oceanfront-html-editor/src/scss/index.scss
@@ -1,8 +1,9 @@
 .of-editor {
   --content-margin: var(--of-editor-content-margin, 0.75em);
-  overflow: hidden;
   max-height: 100%;
-
+  .of-field-content-text {
+    overflow: visible;
+  }
   .editor-outer {
     background-color: rgb(255, 255, 255);
     display: flex;
@@ -83,6 +84,46 @@
         flex-basis: 10em;
         max-width: 15em;
       }
+
+      .editor-action {
+        position: relative;
+        display: inline-block;
+        .tooltip {
+          font-size: 0.8em;
+          visibility: hidden;
+          width: 120px;
+          text-align: center;
+          position: absolute;
+          z-index: 1;
+          bottom: 125%;
+          left: 50%;
+          margin-left: -60px;
+          opacity: 0;
+          .tooltip-text {
+            width: fit-content;
+            background-color: #555;
+            color: #fff;
+            padding: 4px 8px;
+            transition: opacity 0.3s;
+            border-radius: 6px;
+            margin: 0 auto;
+          }
+          &::after {
+            content: '';
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            margin-left: -5px;
+            border-width: 5px;
+            border-style: solid;
+            border-color: #555 transparent transparent transparent;
+          }
+        }
+        &:hover .tooltip {
+          visibility: visible;
+          opacity: 1;
+        }
+      }
     }
 
     .editor-toolbar-border {