Problem With Bounding Rectangle Mouse Events In Sharepoint

Copper Contributor

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>
    <p><span id="tip_value">Lorem Ipsum</span></p>

<script type="text/javascript">
const show_tooltip = (g) => {
    let coords = g.getBoundingClientRect()
    let tt = document.getElementById("tooltip")
    tt.classList.remove("hidden") = (coords.x) + "px" = (coords.y) + "px"
const hide_tooltip = () => {


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!







0 Replies