diff --git a/apps/common/main/lib/component/SynchronizeTip.js b/apps/common/main/lib/component/SynchronizeTip.js
index e317f4044..b048d94e3 100644
--- a/apps/common/main/lib/component/SynchronizeTip.js
+++ b/apps/common/main/lib/component/SynchronizeTip.js
@@ -43,7 +43,7 @@ define([
             options : {
                 target  : $(document.body),
                 text    : '',
-                placement: 'right',
+                placement: 'right-bottom',
                 showLink: true
             },
 
@@ -53,7 +53,7 @@ define([
                         '<div class="tip-arrow <%= scope.placement %>"></div>',
                         '<div>',
                             '<div class="tip-text"><%= scope.text %></div>',
-                            '<div class="close img-commonctrl"></div>',
+                            '<div class="close"></div>',
                         '</div>',
                         '<% if ( scope.showLink ) { %>',
                         '<div class="show-link"><label><%= scope.textLink %></label></div>',
@@ -96,6 +96,7 @@ define([
 
             hide: function() {
                 if (this.cmpEl) this.cmpEl.hide();
+                this.trigger('hide');
             },
 
             close: function() {
@@ -103,27 +104,45 @@ define([
             },
 
             applyPlacement: function () {
-                var showxy = this.target.offset(),
-                    innerHeight = Common.Utils.innerHeight();
+                var showxy = this.target.offset();
+                if (this.placement=='target') {
+                    this.cmpEl.css({top : showxy.top + 5 + 'px', left: showxy.left + 5 + 'px'});
+                    return;
+                }
 
-                if (this.placement == 'document') {
-                    // this.cmpEl.css('top', $('#editor_sdk').offset().top);
-                } else
-                if (this.placement == 'top')
-                    this.cmpEl.css({bottom : innerHeight - showxy.top + 'px', right: Common.Utils.innerWidth() - showxy.left - this.target.width()/2 + 'px'});
-                else if (this.placement == 'bottom')
-                    this.cmpEl.css({top : (showxy.top+5) + this.target.height() + 'px', left: showxy.left + (this.target.width() - this.cmpEl.width())/2 + 'px'});
-                else if (this.placement == 'target') {
-                    this.cmpEl.css({top : (showxy.top+5) + 'px', left: (showxy.left+5) + 'px'});
-                } else {// left or right
-                    var top = showxy.top + this.target.height()/2,
-                        height = this.cmpEl.height();
-                    if (top+height>innerHeight)
-                        top = innerHeight - height;
-                    if (this.placement == 'left')
-                        this.cmpEl.css({top : top + 'px', right: Common.Utils.innerWidth() - showxy.left - 5 + 'px'});
-                    else
-                        this.cmpEl.css({top : top + 'px', left: showxy.left + this.target.width() + 'px'});
+                var placement = this.placement.split('-');
+                if (placement.length>0) {
+                    var top, left, bottom, right;
+                    var pos = placement[0];
+                    if (pos=='top') {
+                        bottom = Common.Utils.innerHeight() - showxy.top;
+                    } else if (pos == 'bottom') {
+                        top = showxy.top + this.target.height();
+                    } else if (pos == 'left') {
+                        right = Common.Utils.innerWidth() - showxy.left;
+                    } else if (pos == 'right') {
+                        left = showxy.left + this.target.width();
+                    }
+                    pos = placement[1];
+                    if (pos=='top') {
+                        bottom = Common.Utils.innerHeight() - showxy.top - this.target.height()/2;
+                    } else if (pos == 'bottom') {
+                        top = showxy.top + this.target.height()/2;
+                    } else if (pos == 'left') {
+                        right = Common.Utils.innerWidth() - showxy.left - this.target.width()/2;
+                    } else if (pos == 'right') {
+                        left = showxy.left + this.target.width()/2;
+                    } else {
+                        if (bottom!==undefined || top!==undefined)
+                            left = showxy.left + (this.target.width() - this.cmpEl.width())/2;
+                        else
+                            top = showxy.top + (this.target.height() - this.cmpEl.height())/2;
+                    }
+                    top = (top!==undefined) ? (top + 'px') : 'auto';
+                    bottom = (bottom!==undefined) ? (bottom + 'px') : 'auto';
+                    left = (left!==undefined) ? (left + 'px') : 'auto';
+                    right = (right!==undefined) ? (right + 'px') : 'auto';
+                    this.cmpEl.css({top : top, left: left, right: right, bottom: bottom});
                 }
             },
 
diff --git a/apps/common/main/resources/less/synchronize-tip.less b/apps/common/main/resources/less/synchronize-tip.less
index 5c2cdc38a..64ebe4bc6 100644
--- a/apps/common/main/resources/less/synchronize-tip.less
+++ b/apps/common/main/resources/less/synchronize-tip.less
@@ -33,6 +33,40 @@
         }
     }
 
+    &.theme-color {
+        .asc-synchronizetip {
+            background-color: @header-background-color-ie;
+            background-color: @header-background-color;
+            color: @text-toolbar-header-ie;
+            color: @text-toolbar-header;
+
+            .close {
+                &:before, &:after {
+                    background-color: @text-toolbar-header-ie;
+                    background-color: @text-toolbar-header;
+                }
+            }
+        }
+
+        .tip-arrow:after {
+            background-color: @header-background-color-ie;
+            background-color: @header-background-color;
+        }
+    }
+
+    &.toolbar-color {
+        .asc-synchronizetip {
+            background-color: @background-toolbar-ie;
+            background-color: @background-toolbar;
+        }
+
+        .tip-arrow:after {
+            background-color: @background-toolbar-ie;
+            background-color: @background-toolbar;
+        }
+    }
+
+
     &.inc-index {
         z-index: @zindex-navbar + 4;
     }
@@ -42,9 +76,103 @@
         overflow: hidden;
     }
 
+    &.right-top,
+    &.right-bottom,
     &.right {
         margin: 0 0 0 15px;
+    }
 
+    &.left-top,
+    &.left-bottom,
+    &.left {
+        margin: 0 15px 0 0;
+    }
+
+    &.top-left,
+    &.top-right,
+    &.top {
+        margin: 0 0 15px 0;
+    }
+
+    &.bottom-left,
+    &.bottom-right,
+    &.bottom {
+        margin: 15px 0 0 0;
+    }
+
+    &.right-top,
+    &.right-bottom {
+        margin: 0 0 0 15px;
+    }
+
+    &.right {
+        .tip-arrow {
+            left: -13px;
+            top: 50%;
+            margin-top: -7px;
+            width: 16px;
+            height: 15px;
+            .box-shadow(0 0 8px -5px rgba(0, 0, 0, 0.2));
+
+            &:after {
+                top: 0;
+                left: 8px;
+                width: 16px;
+                .box-shadow(0 0 8px -1px rgba(0, 0, 0, 0.2));
+            }
+        }
+    }
+    &.left {
+        .tip-arrow {
+            right: -13px;
+            top: 50%;
+            margin-top: -7px;
+            width: 16px;
+            height: 15px;
+            .box-shadow(0 0 8px -5px rgba(0, 0, 0, 0.2));
+
+            &:after {
+                top: 0;
+                left: -8px;
+                width: 16px;
+                .box-shadow(0 4px 8px -1px rgba(0, 0, 0, 0.2));
+            }
+        }
+    }
+    &.top {
+        .tip-arrow {
+            left: 50%;
+            bottom: -12px;
+            margin-left: -6px;
+            width: 16px;
+            height: 16px;
+            .box-shadow(0 0 8px -5px rgba(0, 0, 0, 0.2));
+
+            &:after {
+                top: -6px;
+                left: 0;
+                width: 16px;
+             }
+        }
+    }
+    &.bottom {
+        .tip-arrow {
+            left: 50%;
+            top: -12px;
+            margin-left: -7px;
+            width: 16px;
+            height: 15px;
+            .box-shadow(0 0 8px -5px rgba(0, 0, 0, 0.2));
+
+            &:after {
+                top: 7px;
+                left: 0;
+                width: 16px;
+            }
+        }
+    }
+
+    &.right-bottom {
         .tip-arrow {
             left: -15px;
             top: 0;
@@ -60,9 +188,7 @@
         }
     }
 
-    &.left {
-        margin: 0 15px 0 0;
-
+    &.left-bottom {
         .tip-arrow {
             right: -15px;
             top: 0;
@@ -73,14 +199,11 @@
             &:after {
                 top: -7px;
                 left: -7px;
-                width: 15px;
             }
         }
     }
 
-    &.top {
-        margin: 0 0 15px 0;
-
+    &.top-left {
         .tip-arrow {
             right: 0;
             bottom: -15px;
@@ -94,6 +217,87 @@
             }
         }
     }
+
+    &.top-right {
+        .tip-arrow {
+            left: 0;
+            bottom: -15px;
+            width: 15px;
+            height: 15px;
+            .box-shadow(-5px 0 8px -5px rgba(0, 0, 0, 0.2));
+
+            &:after {
+                top: -8px;
+                left: -8px;
+                .box-shadow(2px 2px 8px -1px rgba(0, 0, 0, 0.2));
+            }
+        }
+    }
+
+    &.bottom-left {
+        .tip-arrow {
+            right: 0;
+            top: -15px;
+            width: 15px;
+            height: 15px;
+            .box-shadow(8px 5px 8px -5px rgba(0, 0, 0, 0.2));
+
+            &:after {
+                top: 8px;
+                left: 8px;
+                .box-shadow(0 0 8px -1px rgba(0, 0, 0, 0.2));
+            }
+        }
+    }
+
+    &.bottom-right {
+        .tip-arrow {
+            left: 0;
+            top: -15px;
+            width: 15px;
+            height: 15px;
+            .box-shadow(-8px 0 8px -5px rgba(0, 0, 0, 0.2));
+
+            &:after {
+                top: 8px;
+                left: -8px;
+                .box-shadow(0 0 8px -1px rgba(0, 0, 0, 0.2));
+            }
+        }
+    }
+
+    &.right-top {
+        .tip-arrow {
+            left: -15px;
+            bottom: 0;
+            width: 15px;
+            height: 15px;
+            .box-shadow(0 5px 8px -5px rgba(0, 0, 0, 0.2));
+
+            &:after {
+                top: 7px;
+                left: 7px;
+                width: 16px;
+            }
+        }
+    }
+
+    &.left-top {
+        .tip-arrow {
+            right: -15px;
+            bottom: 0;
+            width: 15px;
+            height: 13px;
+            .box-shadow(-5px 8px 8px -5px rgba(0, 0, 0, 0.2));
+
+            &:after {
+                bottom: -7px;
+                left: -7px;
+                //width: 15px;
+                .box-shadow(0 0 8px -1px rgba(0, 0, 0, 0.2));
+            }
+        }
+    }
 }
 
 .asc-synchronizetip {
@@ -103,15 +307,23 @@
     background-color: @background-notification-popover;
     overflow: visible;
 
-    .right & {
+    .bottom-right &,
+    .right-bottom & {
         border-top-left-radius: 0;
     }
 
-    .left & {
+    .bottom-left &,
+    .left-bottom & {
         border-top-right-radius: 0;
     }
 
-    .top & {
+    .top-right &,
+    .right-top & {
+        border-bottom-left-radius: 0;
+    }
+
+    .top-left &,
+    .left-top & {
         border-bottom-right-radius: 0;
     }
 
@@ -159,10 +371,33 @@
     margin: 8px;
     cursor: pointer;
 
-    background-position: @but-close-offset-x @but-close-offset-y;
+    opacity: 0.7;
+    transition: transform .3s;
 
-    &.over,
     &:hover {
-        background-position: @but-close-offset-x @but-close-offset-y - 16px;
+        transform: scale(1.1);
+        opacity: 1;
+    }
+
+    &:before, &:after {
+        content: ' ';
+        position: absolute;
+        left: 7px;
+        left: calc(7px/@pixel-ratio-factor);
+        top: @scaled-one-px-value-ie;
+        top: @scaled-one-px-value;
+        height: 14px;
+        width: @scaled-one-px-value-ie;
+        width: @scaled-one-px-value;
+        background-color: @icon-normal-ie;
+        background-color: @icon-normal;
+    }
+
+    &:before {
+        transform: rotate(45deg);
+    }
+
+    &:after {
+        transform: rotate(-45deg);
     }
 }
diff --git a/apps/documenteditor/main/app/controller/Statusbar.js b/apps/documenteditor/main/app/controller/Statusbar.js
index 1abf49a5d..1960e6a27 100644
--- a/apps/documenteditor/main/app/controller/Statusbar.js
+++ b/apps/documenteditor/main/app/controller/Statusbar.js
@@ -257,7 +257,7 @@ define([
             var tip = new Common.UI.SynchronizeTip({
                 target  : me.btnTurnReview.$el,
                 text    : text,
-                placement: 'top'
+                placement: 'top-left'
             });
             tip.on({
                 'dontshowclick': function() {
diff --git a/apps/documenteditor/main/app/controller/Viewport.js b/apps/documenteditor/main/app/controller/Viewport.js
index 4262f468d..156f3f8a9 100644
--- a/apps/documenteditor/main/app/controller/Viewport.js
+++ b/apps/documenteditor/main/app/controller/Viewport.js
@@ -328,7 +328,6 @@ define([
                         mnuitemDarkTheme.setChecked(Common.UI.Themes.isDarkTheme());
                     });
                 }
-
                 me.header.btnOptions.menu.on('item:click', me.onOptionsItemClick.bind(this));
             }
         },
diff --git a/apps/documenteditor/main/app/view/SignatureSettings.js b/apps/documenteditor/main/app/view/SignatureSettings.js
index ac95843c9..1a62fd30e 100644
--- a/apps/documenteditor/main/app/view/SignatureSettings.js
+++ b/apps/documenteditor/main/app/view/SignatureSettings.js
@@ -348,7 +348,7 @@ define([
                     text    : tipText,
                     showLink: showLink,
                     textLink: this.txtContinueEditing,
-                    placement: 'left'
+                    placement: 'left-bottom'
                 });
                 tip.on({
                     'dontshowclick': function() {
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index e45eefed8..c9a908189 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -2123,6 +2123,7 @@ define([
             createSynchTip: function () {
                 this.synchTooltip = new Common.UI.SynchronizeTip({
                     extCls: (this.mode.customization && !!this.mode.customization.compactHeader) ? undefined : 'inc-index',
+                    placement: 'right-bottom',
                     target: this.btnCollabChanges.$el
                 });
                 this.synchTooltip.on('dontshowclick', function () {
diff --git a/apps/presentationeditor/main/app/view/SignatureSettings.js b/apps/presentationeditor/main/app/view/SignatureSettings.js
index bd40ef48f..8f59da3af 100644
--- a/apps/presentationeditor/main/app/view/SignatureSettings.js
+++ b/apps/presentationeditor/main/app/view/SignatureSettings.js
@@ -302,7 +302,7 @@ define([
                     text    : tipText,
                     showLink: showLink,
                     textLink: this.txtContinueEditing,
-                    placement: 'left'
+                    placement: 'left-bottom'
                 });
                 tip.on({
                     'dontshowclick': function() {
diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js
index 1ede74398..a4aec78b0 100644
--- a/apps/presentationeditor/main/app/view/Toolbar.js
+++ b/apps/presentationeditor/main/app/view/Toolbar.js
@@ -1495,6 +1495,7 @@ define([
             createSynchTip: function () {
                 this.synchTooltip = new Common.UI.SynchronizeTip({
                     extCls: (this.mode.customization && !!this.mode.customization.compactHeader) ? undefined : 'inc-index',
+                    placement: 'right-bottom',
                     target: this.btnCollabChanges.$el
                 });
                 this.synchTooltip.on('dontshowclick', function () {
diff --git a/apps/spreadsheeteditor/main/app/view/SignatureSettings.js b/apps/spreadsheeteditor/main/app/view/SignatureSettings.js
index b05e67694..2502aafde 100644
--- a/apps/spreadsheeteditor/main/app/view/SignatureSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/SignatureSettings.js
@@ -348,7 +348,7 @@ define([
                     text    : tipText,
                     showLink: showLink,
                     textLink: this.txtContinueEditing,
-                    placement: 'left'
+                    placement: 'left-bottom'
                 });
                 tip.on({
                     'dontshowclick': function() {
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js
index ad53816ec..193bf123d 100644
--- a/apps/spreadsheeteditor/main/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js
@@ -2093,6 +2093,7 @@ define([
         createSynchTip: function () {
             this.synchTooltip = new Common.UI.SynchronizeTip({
                 extCls: (this.mode.customization && !!this.mode.customization.compactHeader) ? undefined : 'inc-index',
+                placement: 'right-bottom',
                 target: this.btnCollabChanges.$el
             });
             this.synchTooltip.on('dontshowclick', function() {