csharp-mvc: fixed tooltip

This commit is contained in:
Vladimir Kurguzov
2022-11-15 14:33:15 +03:00
committed by Sergey Linnik
parent 9726c06c84
commit df034c2af2
3 changed files with 45 additions and 3 deletions

View File

@ -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%);
}

View File

@ -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("<div class='tooltip'>" + tooltip + "<div class='arrow'></div></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 });
}).mouseout(function () {
jq("div.tooltip").remove();
});
}

View File

@ -86,7 +86,7 @@
<tr>
<td valign="middle">
<span class="select-user">Username</span>
<img id="info" src="content/images/info.svg" />
<img id="info" class="info" src="content/images/info.svg" />
<select class="select-user" id="user">
<% foreach (User user in Users.getAllUsers())
{ %>
@ -97,7 +97,10 @@
</tr>
<tr>
<td valign="middle">
<span class="select-user">Language editors interface</span>
<span class="select-user">Language</span>
<img class="info info-tooltip" data-id="language"
data-tooltip="Choose the language for ONLYOFFICE editors interface"
src="content/images/info.svg" />
<select class="select-user" id="language">
<% Dictionary<string, string> languages = DocManagerHelper.GetLanguages();
foreach (var lang in languages)