Merge pull request #1806 from ONLYOFFICE/feature/Bug_49506

Feature/bug 49506

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

@@ -459,6 +459,56 @@ 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(!!msg) {
+                const coord  = this.api.asc_getActiveCellCoord();
+                const widthCell = coord.asc_getWidth();
+                const heightCell = coord.asc_getHeight();
+                const topPosition = coord.asc_getY();
+                const leftPosition = coord.asc_getX();
+                const sdk = document.querySelector('#editor_sdk');
+                const rect = sdk.getBoundingClientRect();
+
+                f7.popover.create({
+                    targetX: -10000,
+                    targetY: -10000,
+                    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();
+
+                const tooltipCell = document.querySelector('.tooltip-cell-data');
+
+                // Define left position
+
+                if(rect.right - leftPosition <= widthCell || rect.right - leftPosition <= tooltipCell.offsetWidth) {
+                    tooltipCell.style.left = `${leftPosition - tooltipCell.offsetWidth}px`;
+                } else if(leftPosition === 0) {
+                    tooltipCell.style.left = `26px`;
+                } else {
+                    tooltipCell.style.left = `${leftPosition}px`;
+                }
+
+                // Define top position
+
+                if(rect.bottom - topPosition <= heightCell || rect.bottom - topPosition <= tooltipCell.offsetHeight) {
+                    tooltipCell.style.top = `${rect.bottom - tooltipCell.offsetHeight - heightCell - 7}px`;
+                } else if(topPosition === 0) {
+                    tooltipCell.style.top = `${heightCell + rect.top + 22}px`;
+                } else {
+                    tooltipCell.style.top = `${topPosition + rect.top + heightCell + 2}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

@@ -180,4 +180,33 @@
             color: @text-normal;
         }
     }
+}
+
+.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;
+    }
 }