I tried implementing the HTML tooltip solution from here and here is a snippet of my code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
sup.footnote::after {
content: attr(data-count);
}
sup.footnote:hover {
cursor: help;
position: relative;
}
sup.footnote cite {
display: none;
}
sup.footnote:hover cite {
display: inline-block;
position: absolute;
top: 0px;
left: -50%;
width: 250px;
background: #f0f0f0 no-repeat 100% 5%;
border: #c0c0c0 1px dotted;
border-radius: 8px;
margin: 10px;
padding: 8px;
}
</style>
</head>
<body>
<p>
This is an example of a footnote in HTML
<sup class="footnote" data-count="1">
<cite>
<span> [Sample span]</span> with some explanation:
<a lang="en" href="http://test.gv.at/test.pdf">
http://test.gv.at/test/test/abde4/iabcde/009909asdf/vandsfk23/verylong/gghhy.pdf
</a>
</cite>
</sup>
</p>
</body>
</html>
The issue I'm encountering is with limiting the length of the anchor element. While Firefox handles the anchor well, Chrome struggles. Here is an image: https://i.sstatic.net/6AOcL.png
I've tried solutions like this which suggests setting the display property for the anchor element, but it doesn't work in Chrome. I might be applying it to the wrong elements or with the wrong style.
==> Is there a way to restrict the length of the anchor to, for example, 250px?