In my application, I have a Gantt chart with horizontal scrolling capabilities. Users can navigate through the chart by using the scrollbar, drag and drop feature, or mouse wheel.
The scrollable area of the Gantt chart can be very wide, spanning thousands of pixels in width.
One issue I encountered is related to an HTML element that extends beyond the visible screen width. When trying to use a tooltip library on this element, the tooltips are centered which requires users to scroll towards the middle of the screen to view them. This often results in the tooltip being out of view.
I tried implementing various tooltip libraries without success. Currently, I am experimenting with lightweight jQuery solutions in the hope of finding a suitable tooltip solution that floats around the cursor position.
The image below illustrates the problem of tooltips appearing out of view on my Gantt chart:
Initial Testing....
A simple demo showcases a basic floating tooltip following the mouse cursor's movement.
I have included another demo at the bottom of this question highlighting the issue version.
http://jsfiddle.net/jasondavis/L2gmcxhc/
HTML structure for floating tooltips:
<div class="item">
<p>This is my item</p>
<div class="tooltip">Tooltip</div>
</div>
jQuery code for tooltip functionality:
$(document).ready(function() {
$(".item").mousemove(function(e) {
$('.tooltip').css('left', e.pageX + 10).css('top', e.pageY + 10).css('display', 'block');
});
$(".item").mouseout(function() {
$('.tooltip').css('display', 'none');
});
});
CSS styling for tooltips:
.item {
position: relative;
width: 100px;
height: 40px;
top: 200px;
left: 400px;
background: #CCC;
}
.item .tooltip {
position: fixed;
width: 80px;
height: 30px;
background: #06F;
z-index: 10;
display: none;
}
Update:
Upon testing the second demo http://jsfiddle.net/jasondavis/L2gmcxhc/1/, it became evident that when the element requiring the tooltip hovered upon was wider, such as in a Gantt chart scenario, the tooltip failed to float accurately along with the cursor. As a result, the tooltip would get lost when scrolling horizontally.
I am seeking an easy fix or solution to ensure the tooltips remain aligned with the cursor even when the page width extends beyond the usual viewport. Any assistance or suggestions would be greatly appreciated!