In my table, there is an icon that reveals a chart as a popup when hovered over.
This div is where the chart is displayed:
<div id="chart-outer" style="@style" class="popup-chart close">
<h2 id="charttitle" style="width: 100%; text-align: center;"></h2>
<div id="chartContainer" style="width: 96%; height: 300px; vertical-align: top; direction: ltr; display: inline-block; padding: 10px;"></div>
</div>
When hovering over the table icon, the chart appears like this:
https://i.stack.imgur.com/fCyKn.png
When hovering over the second last item in the table, the chart renders perfectly on the right side of the icon.
I am using JavaScript to apply CSS to the chart div when hovering over the icon:
var mouseX = 100, mouseY = 100;
$(document).mousemove(function (e) {
mouseX = e.pageX;
mouseY = e.pageY - 200;
});
//cache the selector
var follower = $("#chart-outer");
var xp = 0, yp = 0;
var loop = setInterval(function () {
// change 12 to alter damping, higher is slower
xp += (mouseX - xp) / 1;
yp += (mouseY - yp) / 1;
xp = '@SharedPageData.CurrentLanguage.LanguageID' == '1' ? 500 : 200;
follower.css({ left: xp, top: yp });
}, 10);
I have two page versions, one for Arabic and one for English. For the English version, I set the left position to 200, and for Arabic, I set it to 500.
Although it works well, on some high-resolution screens, the chart may overlap with the table icon and flicker. I want to position it consistently on the right side of the icon regardless of screen size, and on the left side for Arabic. How can I achieve this?