diff --git a/web/documentserver-example/csharp-mvc/Content/stylesheet.css b/web/documentserver-example/csharp-mvc/Content/stylesheet.css index 055dd92d..6c8b6135 100644 --- a/web/documentserver-example/csharp-mvc/Content/stylesheet.css +++ b/web/documentserver-example/csharp-mvc/Content/stylesheet.css @@ -740,3 +740,28 @@ html { .user-descr > b { margin-left: 25px; } + +.tooltip { + background: #FFFFFF; + border-radius: 5px; + box-shadow: 0px 7px 25px rgba(85, 85, 85, 0.15); + color: #666666; + line-height: 160%; + 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/csharp-mvc/Scripts/jscript.js b/web/documentserver-example/csharp-mvc/Scripts/jscript.js index e74170c9..f635becd 100644 --- a/web/documentserver-example/csharp-mvc/Scripts/jscript.js +++ b/web/documentserver-example/csharp-mvc/Scripts/jscript.js @@ -323,7 +323,7 @@ if (typeof jQuery != "undefined") { if (hideTooltipTimeout != null) { clearTimeout(hideTooltipTimeout); } - jq(".info").on("touchend", function () { + jq("#info").on("touchend", function () { showUserTooltip(true); }); } @@ -352,4 +352,18 @@ if (typeof jQuery != "undefined") { }, 500); }); } + + jq(".info-tooltip").mouseover(function (event) { + var target = event.target; + var id = target.dataset.id ? target.dataset.id : target.id; + var tooltip = target.dataset.tooltip; + + jq("