How to make a Tooltip float around the Cursor on a extra wide element

Question

I have a Gantt chart that has Horizontal scrolling. You can use the scrollbar, drag and drop, and the mouse wheel to scroll horizontally on this part of my app.

So the scrollable area can be any width and is often very wide in the thousands of pixels.

My issue is that I have an HTML element that stretches the witch of days it should be and when I try to use a tooltip library on the element, they try to center the tooltip which means I have to scroll to the middle of the width of the screen to be able to see the tool tip. Otherwise the tool tip is out of the view port.

So I found some code do to tooltips that instead float and stay around where the cursor is which in theory is exactly what I need!

However so far no luck on all the libraries I tried. I am now experimenting with some custom lightweight jQuery and hoping someone can help.

This image shows my Gantt chart and a tooltip out of view...

full size view

---

Some simple tests....

This demo shows a basic tooltip where the tooltip floats around whereever the mouse cursor goes to.

I have another demo at bottom of question to show my problem version.

http://jsfiddle.net/jasondavis/L2gmcxhc/

Tooltip HTML that floats around the Cursor

<div class="item">
    <p>This is my item</p>
    <div class="tooltip">Tooltip</div>
</div>

jQuery for tooltip

$(document).ready(function() {

    $(".item").mousemove(function(e) { 

        // put other effect in when moving over the element

        // from e you can get the pageX(left position) and pageY(top position) 
        // im not sure if it was the relative or the absolute position
        // i added 10 pxs on the top and left to show the tooltip a bit after
        $('.tooltip').css('left', e.pageX + 10).css('top', e.pageY + 10).css('display', 'block');

    });

    $(".item").mouseout(function() { 
        $('.tooltip').css('display', 'none');
    });

});

CSS

.item {
    position: relative;
    width: 100px;
    height: 40px;
    top: 200px;
    left: 400px;
    background: #CCC;
}

.item .tooltip {
    position: fixed; /** depends on how it handles the e.pageX and e.pageY **/
    width: 80px;
    height: 30px;
    background: #06F;
    z-index: 10;
    display: none; /**let the tooltip be not visable, when startup **/
}

---

Test 2

Now if you view this demo http://jsfiddle.net/jasondavis/L2gmcxhc/1/ I have made the element that is to show the toltip when it is hovered a lot wider to simulate a page like my Gantt chart.

You will note if you scroll to the right the tool tip is lost and does not float around where the cursor is anymore!

Is there an easy fix or solution to this?

Answer 1

Try using:

$('.tooltip')
    .css('left', e.pageX - $(window).scrollLeft() + 10)
    .css('top', e.pageY - $(window).scrollTop() + 10)
    .css('display', 'block');

Answer 2

If you want to spare a few hours ...

... use the native browser tooltips. Just give a title attribute to the element you want to give a tooltip to.

http://jsfiddle.net/jbw3bev2/2/

Style the tooltips

You can use CSS to style the tooltip element: https://stackoverflow.com/a/25813336/1990642