How to get the hovered div position - css

Question

I want my tooltip to be aligned next to the hovered element. How can I find the position of hovered element such that it works in devices also. I am passing the hovered element event on mouseenter.
I tried setting the ClientX, ClientY or screenX, ScreenY position to top and left but it's not working properly.

Answer 1

Example
As you dont provided any code source I created a sample to show what you can do:
var ul = document.querySelector('ul');
var li = ul.querySelectorAll('li');
var tooltip = document.querySelector('.tooltip');
var removeTooltip;
function onMouseOver(e) {
return function() {
clearTimeout(removeTooltip);
tooltip.innerHTML = e.innerHTML;
var w = window;
var tooltipTopPosition = e.offsetTop + (e.clientHeight / 2) - (tooltip.clientHeight / 2);
var leftPosition = e.offsetLeft + e.offsetWidth + 5;
var toolTipWidth = w.innerWidth - leftPosition - 5;
tooltip.style.top = tooltipTopPosition + 'px';
tooltip.style.left = leftPosition + 'px';
tooltip.style.width = toolTipWidth + 'px';
}
}
function onMouseLeave(e) {
return function() {
clearTimeout(removeTooltip);
removeTooltip = setTimeout(function() {
tooltip.innerHTML = '';
}, 100);
};
}
li.forEach(function(item) {
item.onmouseover = onMouseOver(item);
item.onmouseleave = onMouseLeave(item);
});
.tooltip {
background: rgba(0,0,0,0.9);
color: #ffffff;
position: absolute;
z-index: 1000;
word-break: break-all;
white-space: normal;
}
ul {
width: 200px;
margin: 50px auto 0;
padding: 0;
}
ul li {
list-style-type: none;
background: #ccc;
padding: 5px;
border: 1px dotted;
}
<ul>
<li>Lorem.</li>
<li>Necessitatibus.</li>
<li>Dolorum.</li>
<li>Est.</li>
</ul>
<div class="tooltip"></div>