pengjunjie/document-server-integration
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/document-server-integration.git synced 2026-04-07 14:06:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

csharp: added tooltips

Browse Source
This commit is contained in:
Alexandr Fedorov
2021-03-22 21:17:33 +03:00
parent c416712ac3
commit 899df4f39f
4 changed files with 58 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/documentserver-example/csharp/App_Themes/images/info.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12ZM5 6C5 5.44772 5.44772 5 6 5C6.55228 5 7 5.44772 7 6V9C7 9.55229 6.55228 10 6 10C5.44772 10 5 9.55229 5 9V6ZM6 2C5.44772 2 5 2.44772 5 3C5 3.55228 5.44772 4 6 4C6.55228 4 7 3.55228 7 3C7 2.44772 6.55228 2 6 2Z" fill="#D0D5DA"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 488 B

27
web/documentserver-example/csharp/App_Themes/stylesheet.css
View File

@ -525,6 +525,33 @@ footer a:hover {
line-height: 16px !important; line-height: 16px !important;
} }
.info {
cursor: pointer;
padding: 3px 5px;
position: absolute;
}
.tooltip {
background: #FFFFFF;
border-radius: 5px;
box-shadow: 0px 7px 25px rgba(85, 85, 85, 0.15);
color: #666666;
line-height: 160%;
max-width: 312px;
padding: 14px;
position: absolute;
}
.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%);
}
.user-block-table { .user-block-table {
height: 100%; height: 100%;
padding: 14px 0; padding: 14px 0;

33
web/documentserver-example/csharp/Default.aspx
View File

@ -35,24 +35,6 @@
<link rel="stylesheet" type="text/css" href="app_themes/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="app_themes/jquery-ui.css" />
<script language="javascript" type="text/javascript" src="script/jquery-1.9.0.min.js"></script>
<script language="javascript" type="text/javascript" src="script/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="script/jquery.blockUI.js"></script>
<script language="javascript" type="text/javascript" src="script/jquery.iframe-transport.js"></script>
<script language="javascript" type="text/javascript" src="script/jquery.fileupload.js"></script>
<script language="javascript" type="text/javascript" src="script/jquery.dropdownToggle.js"></script>
<script language="javascript" type="text/javascript" src="script/jscript.js"></script>
<script language="javascript" type="text/javascript">
var ConverExtList = '<%= string.Join(",", ConvertExts.ToArray()) %>';
var EditedExtList = '<%= string.Join(",", EditedExts.ToArray()) %>';
</script>
</head> </head>
<body> <body>
<form id="form1" runat="server"> <form id="form1" runat="server">
@ -99,6 +81,7 @@
<tr> <tr>
<td valign="middle"> <td valign="middle">
<span class="select-user">Username</span> <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="app_themes/images/info.svg" />
<select class="select-user" id="user"> <select class="select-user" id="user">
<option value="uid-1">John Smith</option> <option value="uid-1">John Smith</option>
<option value="uid-2">Mark Pottato</option> <option value="uid-2">Mark Pottato</option>
@ -110,6 +93,7 @@
<tr> <tr>
<td valign="middle"> <td valign="middle">
<span class="select-user">Language</span> <span class="select-user">Language</span>
<img class="info" data-id="language" data-tooltip="Choose the language for ONLYOFFICE editors interface" src="app_themes/images/info.svg" />
<select class="select-user" id="language"> <select class="select-user" id="language">
<option value="en">English</option> <option value="en">English</option>
<option value="be">Belarusian</option> <option value="be">Belarusian</option>
@ -322,5 +306,18 @@
</div> </div>
</footer> </footer>
</form> </form>
<script language="javascript" type="text/javascript" src="script/jquery-1.9.0.min.js"></script>
<script language="javascript" type="text/javascript" src="script/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="script/jquery.blockUI.js"></script>
<script language="javascript" type="text/javascript" src="script/jquery.iframe-transport.js"></script>
<script language="javascript" type="text/javascript" src="script/jquery.fileupload.js"></script>
<script language="javascript" type="text/javascript" src="script/jquery.dropdownToggle.js"></script>
<script language="javascript" type="text/javascript" src="script/jscript.js"></script>
<script language="javascript" type="text/javascript">
var ConverExtList = '<%= string.Join(",", ConvertExts.ToArray()) %>';
var EditedExtList = '<%= string.Join(",", EditedExts.ToArray()) %>';
</script>
</body> </body>
</html> </html>

16
web/documentserver-example/csharp/script/jscript.js
View File

@ -238,8 +238,18 @@ if (typeof jQuery != "undefined") {
}); });
}); });
jq.dropdownToggle({
switcherSelector: ".question", jq(".info").mouseover(function (event) {
dropdownID: "hint" 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();
}); });
} }