From 88f32b91f6e65237bfaca3e05883f8531a910116 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Wed, 26 May 2021 18:30:18 +0300
Subject: [PATCH] Hint Manager: change letter getting, add offsets, add hints
 for toolbar

---
 apps/common/main/lib/component/Button.js      |  20 ++-
 apps/common/main/lib/component/ComboBox.js    |  10 +-
 .../main/lib/component/ComboBoxFonts.js       |   2 +-
 .../main/lib/component/ComboDataView.js       |   8 +-
 apps/common/main/lib/component/HintManager.js |  66 +++++---
 apps/common/main/lib/util/utils.js            |   6 +-
 apps/common/main/lib/view/Header.js           |   3 +-
 apps/common/main/lib/view/Plugins.js          |   8 +-
 apps/common/main/lib/view/ReviewChanges.js    |  44 +++--
 .../main/app/controller/Toolbar.js            |   2 +-
 apps/documenteditor/main/app/view/Links.js    |  30 +++-
 apps/documenteditor/main/app/view/Toolbar.js  | 160 +++++++++++++-----
 12 files changed, 255 insertions(+), 104 deletions(-)

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index 8f76ff772..400d5554f 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -194,7 +194,7 @@ define([
             '<% } %>';
 
     var templateHugeCaption =
-            '<button type="button" class="btn <%= cls %>" id="<%= id %>" > ' +
+            '<button type="button" class="btn <%= cls %>" id="<%= id %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>"> ' +
                 '<div class="inner-box-icon">' +
                     templateBtnIcon +
                 '</div>' +
@@ -205,7 +205,7 @@ define([
 
     var templateHugeMenuCaption =
         '<div class="btn-group icon-top" id="<%= id %>" style="<%= style %>">' +
-            '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">' +
+            '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">' +
                 '<div class="inner-box-icon">' +
                     templateBtnIcon +
                 '</div>' +
@@ -223,7 +223,7 @@ define([
                     templateBtnIcon +
                 '</span>' +
             '</button>' +
-            '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' +
+            '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">' +
                 '<span class="btn-fixflex-vcenter">' +
                     '<span class="caption"><%= caption %></span>' +
                     '<i class="caret"></i>' +
@@ -247,7 +247,8 @@ define([
             split           : false,
             visible         : true,
             dataHint        : '',
-            dataHintDirection: ''
+            dataHintDirection: '',
+            dataHintOffset: '0, 0'
         },
 
         template: _.template([
@@ -263,13 +264,13 @@ define([
                 '}} %>',
             '<% } %>',
             '<% if ( !menu ) { %>',
-                '<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" >',
+                '<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
                     '<% applyicon() %>',
                     '<span class="caption"><%= caption %></span>',
                 '</button>',
             '<% } else if (split == false) {%>',
                 '<div class="btn-group" id="<%= id %>" style="<%= style %>">',
-                    '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>">',
+                    '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
                         '<% applyicon() %>',
                         '<span class="caption"><%= caption %></span>',
                         '<span class="inner-box-caret">' +
@@ -279,11 +280,11 @@ define([
                 '</div>',
             '<% } else { %>',
                 '<div class="btn-group split" id="<%= id %>" style="<%= style %>">',
-                    '<button type="button" class="btn <%= cls %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>">',
+                    '<button type="button" class="btn <%= cls %>">',
                         '<% applyicon() %>',
                         '<span class="caption"><%= caption %></span>',
                     '</button>',
-                    '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>">',
+                    '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
                         '<i class="caret"></i>',
                         '<span class="sr-only"></span>',
                     '</button>',
@@ -354,7 +355,8 @@ define([
                         caption      : me.caption,
                         style        : me.style,
                         dataHint     : me.options.dataHint,
-                        dataHintDirection: me.options.dataHintDirection
+                        dataHintDirection: me.options.dataHintDirection,
+                        dataHintOffset: me.options.dataHintOffset
                     }));
 
                     if (me.menu && _.isObject(me.menu) && _.isFunction(me.menu.render))
diff --git a/apps/common/main/lib/component/ComboBox.js b/apps/common/main/lib/component/ComboBox.js
index 121f4570c..cd5a614ff 100644
--- a/apps/common/main/lib/component/ComboBox.js
+++ b/apps/common/main/lib/component/ComboBox.js
@@ -87,13 +87,15 @@ define([
                 valueField  : 'value',
                 search      : false,
                 scrollAlwaysVisible: false,
-                takeFocusOnClose: false
+                takeFocusOnClose: false,
+                dataHint: '',
+                dataHintDirection: ''
             },
 
             template: _.template([
                 '<span class="input-group combobox <%= cls %>" id="<%= id %>" style="<%= style %>">',
                     '<input type="text" class="form-control" spellcheck="false">',
-                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
+                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>">',
                         '<span class="caret"></span>',
                     '</button>',
                     '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
@@ -147,7 +149,9 @@ define([
                         menuCls     : this.menuCls,
                         menuStyle   : this.menuStyle,
                         items       : items,
-                        scope       : me
+                        scope       : me,
+                        dataHint    : this.options.dataHint,
+                        dataHintDirection: this.options.dataHintDirection
                     }));
                     if (this.itemsTemplate)
                         this.cmpEl.find('ul').html(
diff --git a/apps/common/main/lib/component/ComboBoxFonts.js b/apps/common/main/lib/component/ComboBoxFonts.js
index 2f47283a6..4893a0608 100644
--- a/apps/common/main/lib/component/ComboBoxFonts.js
+++ b/apps/common/main/lib/component/ComboBoxFonts.js
@@ -88,7 +88,7 @@ define([
                 '<div class="input-group combobox fonts <%= cls %>" id="<%= id %>" style="<%= style %>">',
                     '<input type="text" class="form-control" spellcheck="false"> ',
                     '<div style="display: table-cell;"></div>',
-                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>',
+                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>"><span class="caret"></span></button>',
                     '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                         '<li class="divider">',
                     '<% _.each(items, function(item) { %>',
diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js
index 25f912a47..2241156d2 100644
--- a/apps/common/main/lib/component/ComboDataView.js
+++ b/apps/common/main/lib/component/ComboDataView.js
@@ -60,7 +60,9 @@ define([
             beforeOpenHandler   : null,
             additionalMenuItems  : null,
             showLast: true,
-            minWidth: -1
+            minWidth: -1,
+            dataHint: '',
+            dataHintDirection: ''
         },
 
         template: _.template([
@@ -110,7 +112,9 @@ define([
                     items: [
                         {template: _.template('<div class="menu-picker-container"></div>')}
                     ]
-                })
+                }),
+                dataHint: this.options.dataHint,
+                dataHintDirection: this.options.dataHintDirection
             });
 
             if  (this.options.additionalMenuItems != null) {
diff --git a/apps/common/main/lib/component/HintManager.js b/apps/common/main/lib/component/HintManager.js
index aade42311..5c60c7a26 100644
--- a/apps/common/main/lib/component/HintManager.js
+++ b/apps/common/main/lib/component/HintManager.js
@@ -48,7 +48,7 @@ if (Common.UI === undefined) {
 
 Common.UI.HintManager = new(function() {
     var _lang = 'en',
-        _arrLetters = [],
+        _arrAlphabet = [],
         _isAlt = false,
         _hintVisible = false,
         _currentLevel = 0,
@@ -91,6 +91,15 @@ Common.UI.HintManager = new(function() {
         _currentLevel--;
     };
 
+    var _getLetters = function(countButtons) {
+        var arr = [..._arrAlphabet];
+        arr[0] = _arrAlphabet[0].repeat(2);
+        for (var i = 1; arr.length < countButtons; i++) {
+            arr.push(_arrAlphabet[0] + _arrAlphabet[i]);
+        }
+        return arr;
+    };
+
     var _getControls = function() {
         /*if (!_controls[_currentLevel]) {
             _controls[_currentLevel] = $('[data-hint=' + (_currentLevel) + ']').toArray();
@@ -101,18 +110,11 @@ Common.UI.HintManager = new(function() {
         var visibleItems = arr.filter(function (item) {
             return $(item).is(':visible');
         });
-        if (visibleItems.length > _arrLetters.length) {
-            var arrLength = _arrLetters.length;
-            var count = visibleItems.length - arrLength;
-            var arrIndexes = [];
-            for (var i = 0; arrIndexes.length < count; i++) {
-                var randInd = Math.floor(Math.random() * arrLength); //get random index
-                if (arrIndexes.indexOf(randInd) === -1 && randInd < arrLength - 1) {
-                    arrIndexes.push(randInd);
-                    _arrLetters[_arrLetters.length] = _arrLetters[randInd] + _arrLetters[randInd + 1];
-                    _arrLetters[randInd] = _arrLetters[randInd] + _arrLetters[randInd];
-                }
-            }
+        var _arrLetters = [];
+        if (visibleItems.length > _arrAlphabet.length) {
+            _arrLetters = _getLetters(visibleItems.length);
+        } else {
+            _arrLetters = [..._arrAlphabet];
         }
         visibleItems.forEach(function (item, index) {
             var el = $(item);
@@ -129,22 +131,42 @@ Common.UI.HintManager = new(function() {
             if (!item.hasClass('disabled')) {
                 var hint = $('<div style="" class="hint-div">' + item.attr('data-hint-title') + '</div>');
                 var direction = item.attr('data-hint-direction');
+                var offsets = item.attr('data-hint-offset') ? item.attr('data-hint-offset').split(',').map((item) => (parseInt(item))) : [0, 0];
                 var offset = item.offset();
-                if (direction === 'top')
-                    hint.css({left: offset.left + (item.outerWidth() - 20) / 2, top: offset.top - 16});
+                if (direction === 'middle')
+                    hint.css({
+                        top: offset.top + item.outerHeight() / 2 + 6 + offsets[0],
+                        left: offset.left + (item.outerWidth() - 20) / 2 + offsets[1]
+                    });
+                else if (direction === 'top')
+                    hint.css({
+                        top: offset.top - 16 + offsets[0],
+                        left: offset.left + (item.outerWidth() - 20) / 2 + offsets[1]
+                    });
+                else if (direction === 'left-top')
+                    hint.css({
+                        top: offset.top - 16 + offsets[0],
+                        left: offset.left - 16 + offsets[1]
+                    });
                 else if (direction === 'right')
                     hint.css({
-                        left: offset.left + item.outerWidth() - 4,
-                        top: offset.top + (item.outerHeight() - 20) / 2
+                        top: offset.top + (item.outerHeight() - 20) / 2 + offsets[0],
+                        left: offset.left + item.outerWidth() - 4 + offsets[1]
                     });
                 else if (direction === 'left')
-                    hint.css({left: offset.left - 18, top: offset.top + (item.outerHeight() - 20) / 2});
+                    hint.css({
+                        top: offset.top + (item.outerHeight() - 20) / 2 + offsets[0],
+                        left: offset.left - 18 + offsets[1]
+                    });
                 else if (direction === 'left-bottom')
-                    hint.css({left: offset.left - 8, top: offset.top - item.outerHeight()});
+                    hint.css({
+                        top: offset.top + item.outerHeight() - 3 + offsets[0],
+                        left: offset.left - 16 + offsets[1]
+                    });
                 else
                     hint.css({
-                        left: offset.left + (item.outerWidth() - 20) / 2,
-                        top: offset.top + item.outerHeight() - 3
+                        top: offset.top + item.outerHeight() - 3 + offsets[0],
+                        left: offset.left + (item.outerWidth() - 20) / 2 + offsets[1]
                     });
                 $(document.body).append(hint);
 
@@ -214,7 +236,7 @@ Common.UI.HintManager = new(function() {
 
     var _getAlphabetLetters = function () {
         Common.Utils.loadConfig('../../common/main/resources/alphabetletters/alphabetletters.json', function (langsJson) {
-            _arrLetters = langsJson[_lang];
+            _arrAlphabet = langsJson[_lang];
         });
     };
 
diff --git a/apps/common/main/lib/util/utils.js b/apps/common/main/lib/util/utils.js
index a494fd29d..04cf4c906 100644
--- a/apps/common/main/lib/util/utils.js
+++ b/apps/common/main/lib/util/utils.js
@@ -858,7 +858,7 @@ Common.Utils.lockControls = function(causes, lock, opts, defControls) {
     });
 };
 
-Common.Utils.injectButtons = function($slots, id, iconCls, caption, lock, split, menu, toggle) {
+Common.Utils.injectButtons = function($slots, id, iconCls, caption, lock, split, menu, toggle, dataHint, dataHintDirection) {
     var btnsArr = createButtonSet();
     btnsArr.setDisabled(true);
     id = id || ("id-toolbar-" + iconCls);
@@ -876,7 +876,9 @@ Common.Utils.injectButtons = function($slots, id, iconCls, caption, lock, split,
             menu: menu || false,
             enableToggle: toggle || false,
             lock: lock,
-            disabled: true
+            disabled: true,
+            dataHint: dataHint,
+            dataHintDirection: dataHintDirection
         });
 
         btnsArr.add(button);
diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js
index 87b97da0b..4b3e60c94 100644
--- a/apps/common/main/lib/view/Header.js
+++ b/apps/common/main/lib/view/Header.js
@@ -463,7 +463,8 @@ define([
                         iconCls: iconid,
                         disabled: disabled === true,
                         dataHint:'0',
-                        dataHintDirection: 'left-bottom'
+                        dataHintDirection: 'left',
+                        dataHintOffset: '10, 10'
                     })).render(slot);
                 }
 
diff --git a/apps/common/main/lib/view/Plugins.js b/apps/common/main/lib/view/Plugins.js
index d607a1fdf..6bf21e671 100644
--- a/apps/common/main/lib/view/Plugins.js
+++ b/apps/common/main/lib/view/Plugins.js
@@ -159,7 +159,9 @@ define([
                                 menu: modes && modes.length > 1,
                                 split: modes && modes.length > 1,
                                 value: guid,
-                                hint: model.get('name')
+                                hint: model.get('name'),
+                                dataHint: '1',
+                                dataHintDirection: 'bottom'
                             });
 
                         var $slot = $('<span class="btn-slot text x-huge"></span>').appendTo(_group);
@@ -386,7 +388,9 @@ define([
                 menu: _menu_items.length > 1,
                 split: _menu_items.length > 1,
                 value: guid,
-                hint: model.get('name')
+                hint: model.get('name'),
+                dataHint: '1',
+                dataHintDirection: 'bottom'
             });
 
             if ( btn.split ) {
diff --git a/apps/common/main/lib/view/ReviewChanges.js b/apps/common/main/lib/view/ReviewChanges.js
index 6463da232..9db41ba64 100644
--- a/apps/common/main/lib/view/ReviewChanges.js
+++ b/apps/common/main/lib/view/ReviewChanges.js
@@ -237,14 +237,18 @@ define([
                         cls: 'btn-toolbar x-huge icon-top',
                         caption: this.txtAccept,
                         split: !this.appConfig.canUseReviewPermissions,
-                        iconCls: 'toolbar__icon btn-review-save'
+                        iconCls: 'toolbar__icon btn-review-save',
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
 
                     this.btnReject = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         caption: this.txtReject,
                         split: !this.appConfig.canUseReviewPermissions,
-                        iconCls: 'toolbar__icon btn-review-deny'
+                        iconCls: 'toolbar__icon btn-review-deny',
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
 
                     if (this.appConfig.canFeatureComparison)
@@ -260,7 +264,9 @@ define([
                         iconCls: 'toolbar__icon btn-ic-review',
                         caption: this.txtTurnon,
                         split: !this.appConfig.isReviewOnly,
-                        enableToggle: true
+                        enableToggle: true,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.btnsTurnReview = [this.btnTurnOn];
                 }
@@ -268,13 +274,17 @@ define([
                     this.btnPrev = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-review-prev',
-                        caption: this.txtPrev
+                        caption: this.txtPrev,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
 
                     this.btnNext = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-review-next',
-                        caption: this.txtNext
+                        caption: this.txtNext,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
 
                     if (!this.appConfig.isRestrictedEdit) {// hide Display mode option for fillForms and commenting mode
@@ -317,7 +327,9 @@ define([
                                         value: 'original'
                                     }
                                 ]
-                            })
+                            }),
+                            dataHint: '1',
+                            dataHintDirection: 'bottom'
                         });
                     }
                 }
@@ -335,7 +347,9 @@ define([
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-ic-coedit',
                         caption: this.txtCoAuthMode,
-                        menu: true
+                        menu: true,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                 }
 
@@ -346,7 +360,9 @@ define([
                     this.btnHistory = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-ic-history',
-                        caption: this.txtHistory
+                        caption: this.txtHistory,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                 }
 
@@ -355,7 +371,9 @@ define([
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-ic-chat',
                         caption: this.txtChat,
-                        enableToggle: true
+                        enableToggle: true,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                 }
 
@@ -364,13 +382,17 @@ define([
                         cls: 'btn-toolbar x-huge icon-top',
                         caption: this.txtCommentRemove,
                         split: true,
-                        iconCls: 'toolbar__icon btn-rem-comment'
+                        iconCls: 'toolbar__icon btn-rem-comment',
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.btnCommentResolve = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         caption: this.txtCommentResolve,
                         split: true,
-                        iconCls: 'toolbar__icon btn-resolve-all'
+                        iconCls: 'toolbar__icon btn-resolve-all',
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                 }
 
diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index c64ec0b3b..e8e7712b1 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -3168,7 +3168,7 @@ define([
             me.appOptions = config;
 
             if ( config.canCoAuthoring && config.canComments ) {
-                this.btnsComment = Common.Utils.injectButtons(this.toolbar.$el.find('.slot-comment'), 'tlbtn-addcomment-', 'toolbar__icon btn-menu-comments', this.toolbar.capBtnComment);
+                this.btnsComment = Common.Utils.injectButtons(this.toolbar.$el.find('.slot-comment'), 'tlbtn-addcomment-', 'toolbar__icon btn-menu-comments', this.toolbar.capBtnComment, undefined, undefined, undefined, undefined, '1', 'bottom');
                 if ( this.btnsComment.length ) {
                     var _comments = DE.getController('Common.Controllers.Comments').getView();
                     this.btnsComment.forEach(function (btn) {
diff --git a/apps/documenteditor/main/app/view/Links.js b/apps/documenteditor/main/app/view/Links.js
index 04b925479..67e8ef0bc 100644
--- a/apps/documenteditor/main/app/view/Links.js
+++ b/apps/documenteditor/main/app/view/Links.js
@@ -161,9 +161,9 @@ define([
                 var me = this,
                     $host = me.toolbar.$el;
 
-                this.btnsContents = Common.Utils.injectButtons($host.find('.btn-slot.btn-contents'), '', 'toolbar__icon btn-contents', me.capBtnInsContents, undefined, true, true );
-                this.btnsNotes = Common.Utils.injectButtons($host.find('.btn-slot.slot-notes'), '', 'toolbar__icon btn-notes', me.capBtnInsFootnote, undefined, true, true);
-                this.btnsHyperlink = Common.Utils.injectButtons($host.find('.btn-slot.slot-inshyperlink'), '', 'toolbar__icon btn-inserthyperlink', me.capBtnInsLink);
+                this.btnsContents = Common.Utils.injectButtons($host.find('.btn-slot.btn-contents'), '', 'toolbar__icon btn-contents', me.capBtnInsContents, undefined, true, true, undefined, '1', 'bottom' );
+                this.btnsNotes = Common.Utils.injectButtons($host.find('.btn-slot.slot-notes'), '', 'toolbar__icon btn-notes', me.capBtnInsFootnote, undefined, true, true, undefined, '1', 'bottom');
+                this.btnsHyperlink = Common.Utils.injectButtons($host.find('.btn-slot.slot-inshyperlink'), '', 'toolbar__icon btn-inserthyperlink', me.capBtnInsLink, undefined, undefined, undefined, undefined, '1', 'bottom');
                 Array.prototype.push.apply(this.paragraphControls, this.btnsContents.concat(this.btnsNotes, this.btnsHyperlink));
 
                 this.btnContentsUpdate = new Common.UI.Button({
@@ -173,7 +173,9 @@ define([
                     caption: this.capBtnContentsUpdate,
                     split: true,
                     menu: true,
-                    disabled: true
+                    disabled: true,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom'
                 });
                 this.paragraphControls.push(this.btnContentsUpdate);
 
@@ -182,7 +184,9 @@ define([
                     cls: 'btn-toolbar x-huge icon-top',
                     iconCls: 'toolbar__icon btn-bookmarks',
                     caption: this.capBtnBookmarks,
-                    disabled: true
+                    disabled: true,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom'
                 });
                 this.paragraphControls.push(this.btnBookmarks);
 
@@ -191,7 +195,9 @@ define([
                     cls: 'btn-toolbar x-huge icon-top',
                     iconCls: 'toolbar__icon btn-caption',
                     caption: this.capBtnCaption,
-                    disabled: true
+                    disabled: true,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom'
                 });
                 this.paragraphControls.push(this.btnCaption);
 
@@ -200,7 +206,9 @@ define([
                     cls: 'btn-toolbar x-huge icon-top',
                     iconCls: 'toolbar__icon btn-cross-reference',
                     caption: this.capBtnCrossRef,
-                    disabled: true
+                    disabled: true,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom'
                 });
                 this.paragraphControls.push(this.btnCrossRef);
 
@@ -209,7 +217,9 @@ define([
                     cls: 'btn-toolbar',
                     iconCls: 'toolbar__icon btn-contents',
                     caption: this.capBtnTOF,
-                    disabled: true
+                    disabled: true,
+                    dataHint: '1',
+                    dataHintDirection: 'right'
                 });
                 this.paragraphControls.push(this.btnTableFigures);
 
@@ -218,7 +228,9 @@ define([
                     cls: 'btn-toolbar',
                     iconCls: 'toolbar__icon btn-update',
                     caption: this.capBtnContentsUpdate,
-                    disabled: true
+                    disabled: true,
+                    dataHint: '1',
+                    dataHintDirection: 'right'
                 });
                 this.paragraphControls.push(this.btnTableFiguresUpdate);
 
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index a835bc8e6..e0f1f3d10 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -157,28 +157,36 @@ define([
                     this.btnCopy = new Common.UI.Button({
                         id: 'id-toolbar-btn-copy',
                         cls: 'btn-toolbar',
-                        iconCls: 'toolbar__icon btn-copy'
+                        iconCls: 'toolbar__icon btn-copy',
+                        dataHint: '0',
+                        dataHintDirection: 'right'
                     });
                     this.toolbarControls.push(this.btnCopy);
 
                     this.btnPaste = new Common.UI.Button({
                         id: 'id-toolbar-btn-paste',
                         cls: 'btn-toolbar',
-                        iconCls: 'toolbar__icon btn-paste'
+                        iconCls: 'toolbar__icon btn-paste',
+                        dataHint: '0',
+                        dataHintDirection: 'right'
                     });
                     this.paragraphControls.push(this.btnPaste);
 
                     this.btnIncFontSize = new Common.UI.Button({
                         id: 'id-toolbar-btn-incfont',
                         cls: 'btn-toolbar',
-                        iconCls: 'toolbar__icon btn-incfont'
+                        iconCls: 'toolbar__icon btn-incfont',
+                        dataHint: '1',
+                        dataHintDirection: 'top'
                     });
                     this.paragraphControls.push(this.btnIncFontSize);
 
                     this.btnDecFontSize = new Common.UI.Button({
                         id: 'id-toolbar-btn-decfont',
                         cls: 'btn-toolbar',
-                        iconCls: 'toolbar__icon btn-decfont'
+                        iconCls: 'toolbar__icon btn-decfont',
+                        dataHint: '1',
+                        dataHintDirection: 'top'
                     });
                     this.paragraphControls.push(this.btnDecFontSize);
 
@@ -261,7 +269,9 @@ define([
                                     checkable: true
                                 })
                             ]
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'left-bottom'
                     });
                     this.paragraphControls.push(this.btnHighlightColor);
                     this.textOnlyControls.push(this.btnHighlightColor);
@@ -283,7 +293,9 @@ define([
                                 {template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 216px; margin: 10px;"></div>')},
                                 {template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="">' + this.textNewColor + '</a>')}
                             ]
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'left-bottom'
                     });
                     this.paragraphControls.push(this.btnFontColor);
 
@@ -297,7 +309,9 @@ define([
                                 {template: _.template('<div id="id-toolbar-menu-paracolor" style="width: 169px; height: 216px; margin: 10px;"></div>')},
                                 {template: _.template('<a id="id-toolbar-menu-new-paracolor" style="padding-left:12px;">' + this.textNewColor + '</a>')}
                             ]
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'left-bottom'
                     });
                     this.paragraphControls.push(this.btnParagraphColor);
                     this.textOnlyControls.push(this.btnParagraphColor);
@@ -314,7 +328,9 @@ define([
                                 {caption: this.mniCapitalizeWords, value: Asc.c_oAscChangeTextCaseType.CapitalizeWords},
                                 {caption: this.mniToggleCase, value: Asc.c_oAscChangeTextCaseType.ToggleCase}
                             ]
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'top'
                     });
                     this.paragraphControls.push(this.btnChangeCase);
 
@@ -417,7 +433,9 @@ define([
                                 {caption: this.mniHiddenChars, value: 'characters', checkable: true},
                                 {caption: this.mniHiddenBorders, value: 'table', checkable: true}
                             ]
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'left-bottom'
                     });
                     this.toolbarControls.push(this.btnShowHidenChars);
 
@@ -430,7 +448,7 @@ define([
                         split: true,
                         menu: true,
                         dataHint: '1',
-                        dataHintDirection: 'top'
+                        dataHintDirection: 'left-top'
                     });
                     this.paragraphControls.push(this.btnMarkers);
                     this.textOnlyControls.push(this.btnMarkers);
@@ -444,7 +462,7 @@ define([
                         split: true,
                         menu: true,
                         dataHint: '1',
-                        dataHintDirection: 'top'
+                        dataHintDirection: 'left-top'
                     });
                     this.paragraphControls.push(this.btnNumbers);
                     this.textOnlyControls.push(this.btnNumbers);
@@ -491,7 +509,9 @@ define([
                                 {caption: this.mniDrawTable, value: 'draw', checkable: true},
                                 {caption: this.mniEraseTable, value: 'erase', checkable: true}
                             ]
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.paragraphControls.push(this.btnInsertTable);
 
@@ -506,7 +526,9 @@ define([
                                 {caption: this.mniImageFromUrl, value: 'url'},
                                 {caption: this.mniImageFromStorage, value: 'storage'}
                             ]
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.paragraphControls.push(this.btnInsertImage);
 
@@ -515,7 +537,9 @@ define([
                         cls: 'btn-toolbar x-huge icon-top',
                         caption: me.capBtnInsChart,
                         iconCls: 'toolbar__icon btn-insertchart',
-                        menu: true
+                        menu: true,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.paragraphControls.push(this.btnInsertChart);
 
@@ -524,7 +548,9 @@ define([
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-text',
                         caption: me.capBtnInsTextbox,
-                        enableToggle: true
+                        enableToggle: true,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.paragraphControls.push(this.btnInsertText);
                     this.btnInsertTextArt = new Common.UI.Button({
@@ -537,7 +563,9 @@ define([
                             items: [
                                 {template: _.template('<div id="id-toolbar-menu-insart" style="width: 239px; margin-left: 5px;"></div>')}
                             ]
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.paragraphControls.push(this.btnInsertTextArt);
 
@@ -546,7 +574,9 @@ define([
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-editheader',
                         caption: me.capBtnInsHeader,
-                        menu: true
+                        menu: true,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.mnuPageNumberPosPicker = {
                         conf: {disabled: false},
@@ -568,7 +598,9 @@ define([
                         id: 'id-toolbar-btn-datetime',
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-datetime',
-                        caption: me.capBtnDateTime
+                        caption: me.capBtnDateTime,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.paragraphControls.push(this.btnInsDateTime);
 
@@ -576,7 +608,9 @@ define([
                         id: 'id-toolbar-btn-blankpage',
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-blankpage',
-                        caption: me.capBtnBlankPage
+                        caption: me.capBtnBlankPage,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.paragraphControls.push(this.btnBlankPage);
 
@@ -586,7 +620,9 @@ define([
                         iconCls: 'toolbar__icon btn-insertshape',
                         caption: me.capBtnInsShape,
                         enableToggle: true,
-                        menu: new Common.UI.Menu({cls: 'menu-shapes'})
+                        menu: new Common.UI.Menu({cls: 'menu-shapes'}),
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.paragraphControls.push(this.btnInsertShape);
 
@@ -596,7 +632,9 @@ define([
                         iconCls: 'toolbar__icon btn-insertequation',
                         caption: me.capBtnInsEquation,
                         split: true,
-                        menu: new Common.UI.Menu({cls: 'menu-shapes'})
+                        menu: new Common.UI.Menu({cls: 'menu-shapes'}),
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.paragraphControls.push(this.btnInsertEquation);
 
@@ -604,7 +642,9 @@ define([
                         id: 'tlbtn-insertsymbol',
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-symbol',
-                        caption: me.capBtnInsSymbol
+                        caption: me.capBtnInsSymbol,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.paragraphControls.push(this.btnInsertSymbol);
 
@@ -644,7 +684,9 @@ define([
                                 {caption: '--'},
                                 this.mnuDropCapAdvanced = new Common.UI.MenuItem({caption: this.mniEditDropCap})
                             ]
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.paragraphControls.push(this.btnDropCap);
 
@@ -775,7 +817,9 @@ define([
                                 {caption: '--'},
                                 {caption: this.textColumnsCustom, value: 'advanced'}
                             ]
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.paragraphControls.push(this.btnColumns);
 
@@ -804,7 +848,9 @@ define([
                                     value: false
                                 }
                             ]
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.toolbarControls.push(this.btnPageOrient);
 
@@ -868,7 +914,9 @@ define([
                                 {caption: '--'},
                                 {caption: this.textPageMarginsCustom, value: 'advanced'}
                             ]
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.toolbarControls.push(this.btnPageMargins);
 
@@ -992,7 +1040,9 @@ define([
                                 {caption: '--'},
                                 {caption: this.textPageSizeCustom, value: 'advanced'}
                             ]
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.toolbarControls.push(this.btnPageSize);
 
@@ -1040,14 +1090,18 @@ define([
                                     value: 5
                                 }
                             ]
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
 
 
                     this.btnClearStyle = new Common.UI.Button({
                         id: 'id-toolbar-btn-clearstyle',
                         cls: 'btn-toolbar',
-                        iconCls: 'toolbar__icon btn-clearstyle'
+                        iconCls: 'toolbar__icon btn-clearstyle',
+                        dataHint: '1',
+                        dataHintDirection: 'top'
                     });
                     this.toolbarControls.push(this.btnClearStyle);
 
@@ -1055,7 +1109,9 @@ define([
                         id: 'id-toolbar-btn-copystyle',
                         cls: 'btn-toolbar',
                         iconCls: 'toolbar__icon btn-copystyle',
-                        enableToggle: true
+                        enableToggle: true,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     this.toolbarControls.push(this.btnCopyStyle);
 
@@ -1067,48 +1123,62 @@ define([
                             cls: 'shifted-left',
                             items: [],
                             restoreHeight: true
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'top'
                     });
                     this.toolbarControls.push(this.btnColorSchemas);
 
                     this.btnMailRecepients = new Common.UI.Button({
                         id: 'id-toolbar-btn-mailrecepients',
                         cls: 'btn-toolbar',
-                        iconCls: 'toolbar__icon btn-mailmerge'
+                        iconCls: 'toolbar__icon btn-mailmerge',
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
 
                     me.btnImgAlign = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-img-align',
                         caption: me.capImgAlign,
-                        menu: true
+                        menu: true,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
 
                     me.btnImgGroup = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-img-group',
                         caption: me.capImgGroup,
-                        menu: true
+                        menu: true,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     me.btnImgForward = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-img-frwd',
                         caption: me.capImgForward,
                         split: true,
-                        menu: true
+                        menu: true,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     me.btnImgBackward = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-img-bkwd',
                         caption: me.capImgBackward,
                         split: true,
-                        menu: true
+                        menu: true,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
                     me.btnImgWrapping = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-img-wrap',
                         caption: me.capImgWrapping,
-                        menu: true
+                        menu: true,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
 
                     me.btnWatermark = new Common.UI.Button({
@@ -1127,7 +1197,9 @@ define([
                                     value: 'remove'
                                 }
                             ]
-                        })
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
                     });
 
                     me.toolbarControls.push(me.btnImgAlign,
@@ -1167,7 +1239,9 @@ define([
                             {value: 48, displayValue: "48"},
                             {value: 72, displayValue: "72"},
                             {value: 96, displayValue: "96"}
-                        ]
+                        ],
+                        dataHint: '1',
+                        dataHintDirection: 'left-top'
                     });
                     this.paragraphControls.push(this.cmbFontSize);
 
@@ -1176,7 +1250,9 @@ define([
                         menuCls: 'scrollable-menu',
                         menuStyle: 'min-width: 325px;',
                         hint: this.tipFontName,
-                        store: new Common.Collections.Fonts()
+                        store: new Common.Collections.Fonts(),
+                        dataHint: '1',
+                        dataHintDirection: 'left-top'
                     });
                     this.paragraphControls.push(this.cmbFontName);
 
@@ -1193,6 +1269,8 @@ define([
                         itemWidth: 104,
                         itemHeight: 38,
 //                hint        : this.tipParagraphStyle,
+                        dataHint: '1',
+                        dataHintDirection: 'middle',
                         enableKeyEvents: true,
                         additionalMenuItems: [this.listStylesAdditionalMenuItem],
                         beforeOpenHandler: function (e) {
@@ -1440,7 +1518,7 @@ define([
                 _injectComponent('#slot-img-wrapping', this.btnImgWrapping);
                 _injectComponent('#slot-btn-watermark', this.btnWatermark);
 
-                this.btnsPageBreak = Common.Utils.injectButtons($host.find('.btn-slot.btn-pagebreak'), '', 'toolbar__icon btn-pagebreak', this.capBtnInsPagebreak, undefined, true, true);
+                this.btnsPageBreak = Common.Utils.injectButtons($host.find('.btn-slot.btn-pagebreak'), '', 'toolbar__icon btn-pagebreak', this.capBtnInsPagebreak, undefined, true, true, undefined, '1', 'bottom');
                 Array.prototype.push.apply(this.paragraphControls, this.btnsPageBreak);
 
                 return $host;