I am having an issue with some custom JavaScript that is supposed to make a tooltip to display some extra information.
I am using a simple event listener to handle this. See the code below.
<h1 onmouseover="show_tooltip(this)" onmouseout="hide_tooltip()">Test</h1>
<div id="tooltip" class="hidden">
<p><strong id="tip_head">Hexagon Value</strong></p>
<hr>
<p><span id="tip_value">Lorem Ipsum</span></p>
</div>
<script type="text/javascript">
const show_tooltip = (g) => {
let coords = g.getBoundingClientRect()
let tt = document.getElementById("tooltip")
tt.classList.remove("hidden")
tt.style.left = (coords.x) + "px"
tt.style.top = (coords.y) + "px"
console.log("call")
}
const hide_tooltip = () => {
document.getElementById("tooltip").classList.add("hidden")
}
</script>
I have implemented this and consistently run into the left and right coordinates being far off from where the mouse event actually happens.
I also only run into this issue on SharePoint, on a standard localhost environment the code all functions regularly.
I can fix this by adjusting the pixels on the x and y coordinates of my code (left and top) but was wondering if there is a different type of object, I should use in SharePoint to generate the coordinates more accurately.
Any help would be greatly appreciated!
