sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-15 01:05:42 +00:00
Code Issues Projects Releases Wiki Activity

better tooltips

Browse Source
This commit is contained in:
Patrick Jentsch 2019-11-28 13:45:00 +01:00
parent 9b71fb0cc9
commit dec90e30b5
1 changed files with 45 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
app/templates/corpora/analyse_corpus.html.j2
View File

@ -6,6 +6,28 @@
background-color: #9e9e9e; background-color: #9e9e9e;
cursor: pointer; cursor: pointer;
} }
.material-tooltip {
padding: 5px 20px 20px;
border-radius: 10px;
background: rgba(37, 36, 36);
overflow: visible;
}
.material-tooltip .backdrop {
display: none !important;
}
.material-tooltip:after {
position: absolute;
content: "";
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 13px 0 13px;
border-color: rgba(37, 36, 36) transparent transparent transparent;
}
</style> </style>
<div class="col s12 m3 sticky"> <div class="col s12 m3 sticky">
@ -239,15 +261,29 @@
function addToolTipToTokenElement(tokenElement, token) { function addToolTipToTokenElement(tokenElement, token) {
M.Tooltip.init(tokenElement, M.Tooltip.init(tokenElement,
{"html": `<p>Token information</p> {"html": `<table>
<p class="left-align"> <tr>
word: ${token["word"]}<br> <th>Token information</th>
lemma: ${token["lemma"]}<br> <th>Source information</th>
pos: ${token["pos"]}<br> </tr>
simple_pos: ${token["simple_pos"]}<br> <tr>
text: ${result["text_loopup"][token["text_id"]]["title"]} <td class="left-align">
</p>`, word: ${token["word"]}<br>
"position": "top"}); lemma: ${token["lemma"]}<br>
pos: ${token["pos"]}<br>
simple_pos: ${token["simple_pos"]}
</td>
<td class="left-align">
Title: ${result["text_loopup"][token["text_id"]]["title"]}<br>
Author: ${result["text_loopup"][token["text_id"]]["title"]}<br>
Publishing year: ${result["text_loopup"][token["text_id"]]["publishing_year"]}
</td>
</tr>
</table>`,
"inDuration": 2500,
"margin": 15,
"position": "top",
"transitionMovement": 0});
} }
</script> </script>
{% endblock %} {% endblock %}