better tooltips

This commit is contained in:
Patrick Jentsch 2019-11-28 13:45:00 +01:00
parent 9b71fb0cc9
commit dec90e30b5

View File

@ -6,6 +6,28 @@
background-color: #9e9e9e;
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>
<div class="col s12 m3 sticky">
@ -239,15 +261,29 @@
function addToolTipToTokenElement(tokenElement, token) {
M.Tooltip.init(tokenElement,
{"html": `<p>Token information</p>
<p class="left-align">
word: ${token["word"]}<br>
lemma: ${token["lemma"]}<br>
pos: ${token["pos"]}<br>
simple_pos: ${token["simple_pos"]}<br>
text: ${result["text_loopup"][token["text_id"]]["title"]}
</p>`,
"position": "top"});
{"html": `<table>
<tr>
<th>Token information</th>
<th>Source information</th>
</tr>
<tr>
<td class="left-align">
word: ${token["word"]}<br>
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>
{% endblock %}