diff --git a/web/documentserver-example/nodejs/helpers/users.js b/web/documentserver-example/nodejs/helpers/users.js
index 33418983..6b09368c 100644
--- a/web/documentserver-example/nodejs/helpers/users.js
+++ b/web/documentserver-example/nodejs/helpers/users.js
@@ -16,14 +16,43 @@
  *
  */
 
-var users = [
-    new User("uid-1", "John Smith", "smith@mail.ru", null, null, null, []),
-    new User("uid-2", "Mark Pottato", "pottato@mail.ru", "group-2", ["group-2", ""], true, []),  // own and without group
-    new User("uid-3", "Hamish Mitchell", "mitchell@mail.ru", "group-3", ["group-2"], false, ["copy", "download", "print"]),  // other group only
-    new User("uid-0", null, null, null, null, null, []),
+ var descr_user_1 = [
+    "File author by default",
+    "He doesn’t belong to any of the groups",
+    "He can review all the changes",
+    "The file favorite state is undefined"
 ];
 
-function User(id, name, email, group, reviewGroups, favorite, deniedPermissions) {
+var descr_user_2 = [
+    "He belongs to Group2",
+    "He can review only his own changes or the changes made by the users who don’t belong to any of the groups",
+    "This file is favorite"
+];
+
+var descr_user_3 = [
+    "He belongs to Group3",
+    "He can review only the changes made by the users from Group2",
+    "This file isn’t favorite",
+    "He can’t copy data from the file into the clipboard",
+    "He can’t download the file",
+    "He can’t print the file"
+];
+
+var descr_user_0 = [
+    "The user without a name. The name is requested upon the editor opening",
+    "He doesn’t belong to any of the groups",
+    "He can review all the changes",
+    "The file favorite state is undefined"
+];
+
+var users = [
+    new User("uid-1", "John Smith", "smith@mail.ru", null, null, null, [], descr_user_1),
+    new User("uid-2", "Mark Pottato", "pottato@mail.ru", "group-2", ["group-2", ""], true, [], descr_user_2),  // own and without group
+    new User("uid-3", "Hamish Mitchell", "mitchell@mail.ru", "group-3", ["group-2"], false, ["copy", "download", "print"], descr_user_3),  // other group only
+    new User("uid-0", null, null, null, null, null, [], descr_user_0),
+];
+
+function User(id, name, email, group, reviewGroups, favorite, deniedPermissions, descriptions) {
     this.id = id;
     this.name = name;
     this.email = email;
@@ -31,6 +60,7 @@ function User(id, name, email, group, reviewGroups, favorite, deniedPermissions)
     this.reviewGroups = reviewGroups;
     this.favorite = favorite;
     this.deniedPermissions = deniedPermissions;
+    this.descriptions = descriptions;
 };
 
 users.getUser = function (id) {
diff --git a/web/documentserver-example/nodejs/public/javascripts/jscript.js b/web/documentserver-example/nodejs/public/javascripts/jscript.js
index 8374d78a..212c3618 100644
--- a/web/documentserver-example/nodejs/public/javascripts/jscript.js
+++ b/web/documentserver-example/nodejs/public/javascripts/jscript.js
@@ -301,13 +301,26 @@ if (typeof jQuery != "undefined") {
         var id = target.dataset.id ? target.dataset.id : target.id;
         var tooltip = target.dataset.tooltip;
 
-        jq("<div class='tooltip'>" + tooltip + "<div class='arrow'></div></div>").appendTo("body");
+        jq("<div class='tooltip'>" + tooltip + "</div><div class='arrow'></div>").appendTo("body");
 
-        var top = jq("#" + id).offset().top + jq("#" + id).outerHeight() / 2 - jq("div.tooltip").outerHeight() / 2;
-        var left = jq("#" + id).offset().left + jq("#" + id).outerWidth() + 20;
-        jq("div.tooltip").css({"top": top, "left": left});
+        var left = jq("#" + id).offset().left + jq("#" + id).outerWidth();
+
+        var topElement = jq("#" + id).offset().top;
+        var halfHeightElement = jq("#" + id).outerHeight() / 2;
+
+        var heightToFooter = jq("footer").offset().top - (topElement + halfHeightElement);
+        var halfHeightTooltip = jq("div.tooltip").outerHeight() / 2;
+        if (heightToFooter > (halfHeightTooltip + 10)) {
+            var top = topElement + halfHeightElement - halfHeightTooltip;
+        } else {
+            var top = jq("footer").offset().top - jq("div.tooltip").outerHeight() - 10;
+        }
+
+        jq("div.tooltip").css({"top": top, "left": left + 10});
+        jq("div.arrow").css({"top": topElement + halfHeightElement, "left": left + 6});
     }).mouseout(function () {
         jq("div.tooltip").remove();
+        jq("div.arrow").remove();
     });
 }
 
diff --git a/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css b/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css
index 1bed3b9b..ffe3e7c0 100644
--- a/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css
+++ b/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css
@@ -30,6 +30,7 @@ body {
     font-weight: normal;
     height: 100%;
     margin: 0;
+    overflow-y: overlay;
     padding: 0;
     text-decoration: none;
 }
@@ -577,18 +578,20 @@ footer a:hover {
     box-shadow: 0px 7px 25px rgba(85, 85, 85, 0.15);
     color: #666666;
     line-height: 160%;
-    max-width: 312px;
+    max-width: 455px;
     padding: 14px;
     position: absolute;
-  }
+}
+
+.tooltip ul{
+    margin: 0;
+}
 
 .arrow{
     border-top: 8px solid transparent;
     border-bottom: 8px solid transparent;
     border-right: 8px solid #FFFFFF;
-    left: -4px;
     position: absolute;
-    top: 50%;
     transform: translate(-50%, -50%);
 }
 
diff --git a/web/documentserver-example/nodejs/views/index.ejs b/web/documentserver-example/nodejs/views/index.ejs
index 2dd140c0..3aaea8ef 100644
--- a/web/documentserver-example/nodejs/views/index.ejs
+++ b/web/documentserver-example/nodejs/views/index.ejs
@@ -72,7 +72,17 @@
                                         <tr>
                                             <td valign="middle">
                                                 <span class="select-user">Username</span>
-                                                <img class="info" data-id="user" data-tooltip="You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions" src="images/info.svg" />
+                                                <img class="info" data-id="user" data-tooltip="You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.
+                                                </br>
+                                                <% users.forEach(user => { %>
+                                                    <b><%= user.name == null ? 'Anonymous' : user.name %></b>
+                                                    <ul>
+                                                        <% user.descriptions.forEach(description => { %>
+                                                            <li><%= description %></li>
+                                                        <% }) %>
+                                                    </ul>
+                                                <% }) %>"
+                                                src="images/info.svg" />
                                                 <select class="select-user" id="user">
                                                     <% users.forEach(user => { %>
                                                         <option value="<%= user.id %>"><%= user.name == null ? "Anonymous" : user.name %></option>