[SSE mobile] Add tooltip for data cell

apps/spreadsheeteditor/mobile/src/controller/Main.jsx

@@ -459,6 +459,35 @@ class MainController extends Component {
 
         this.api.asc_registerCallback('asc_onEntriesListMenu', this.onEntriesListMenu.bind(this, false));
         this.api.asc_registerCallback('asc_onValidationListMenu', this.onEntriesListMenu.bind(this, true));
+
+        this.api.asc_registerCallback('asc_onInputMessage', (title, msg) => {
+            if(!!title && !!msg) {
+                const coord  = this.api.asc_getActiveCellCoord();
+                // const topPosition = coord.asc_getY() * 2 + coord.asc_getHeight() * 3 + 10;
+                // const leftPosition = coord.asc_getX();
+                // console.log(coord);
+                // console.log(topPosition, leftPosition);
+                
+                f7.popover.create({
+                    targetX: coord.asc_getX(),
+                    targetY: coord.asc_getY(),
+                    content: `
+                        <div class="popover tooltip-cell-data">
+                            <div class="popover-angle"></div>
+                            <div class="popover-inner">
+                                <p class="tooltip-cell-data__title">${title}</p>
+                                <p class="tooltip-cell-data__msg">${msg}</p>
+                            </div>
+                        </div>
+                    `,
+                    backdrop: false,
+                    closeByBackdropClick: false
+                }).open();
+
+                // document.querySelector('.tooltip-cell-data').style.top = `${topPosition}px`;
+                // document.querySelector('.tooltip-cell-data').style.left = `${leftPosition}px`;
+            }
+        });
     }
 
     onEntriesListMenu(validation, textArr, addArr) {

apps/spreadsheeteditor/mobile/src/less/app-ios.less

@@ -16,4 +16,8 @@
     .actions-move-sheet .actions-button-text{
         color: @brandColor;
     }
+
+    .tooltip-cell-data {
+        border-radius: 4px;
+    }
 }

apps/spreadsheeteditor/mobile/src/less/app-material.less

@@ -58,4 +58,8 @@
             }
         }
     }
+
+    .tooltip-cell-data {
+        border-radius: 0;
+    }
 }

apps/spreadsheeteditor/mobile/src/less/app.less

@@ -181,3 +181,32 @@
         }
     }
 }
+
+.tooltip-cell-data {
+    width: 186px;
+    height: 153px;
+    overflow-y: auto;
+    box-shadow: 0px 20px 46px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    .popover-inner {
+        padding: 8px;
+    }
+    &__title {
+        font-style: normal;
+        font-weight: 600;
+        font-size: 12px;
+        line-height: 16px;
+        color: @text-normal;
+        margin: 0;
+        margin-bottom: 4px;
+    }
+    &__msg {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 11px;
+        line-height: 13px;
+        color: @text-secondary;
+        letter-spacing: 0.06px;
+        margin: 0;
+    }
+}