javascript - Hover for elements underneath others -

i have situation want provide contextual tooltips...however, elements have underneath absolute positioned element.

whilst realise impossible thinking there away interrogate elements underneath top layered element?

im not sure how done. dont mind using either css or javascript in right direction appreciated.

please see image absolute positioned div (grey box red scribble) on bars underneath.

please note green bar position relative while individual bars positioned : absolute.

you have check mouse hit inside each child div; here's fiddle https://jsfiddle.net/6rx18d56/1. hit test:

function inside(a, x, y) {   var l = a.offset().left;   var t = a.offset().top;   var r = l + a.outerwidth(true);   var b = t + a.outerheight(true);    return l <= x && x <= r &&           t <= y && y <= b; } 

edit:

yeah, lol, knew coming. check out https://jsfiddle.net/6rx18d56/2/. i've made more generic, have id , class names rationale in charts. anyways, hit test being same, loop through elements jquery, keeping track of originating overlay , whether hit has ocurred:

$(".foo").on("mousemove", function(e) {   var hit = false;   var self = $(this);    $(".x, .y").each(function(ignore, d) {     if (!hit) {       if (inside($(d), e.pagex, e.pagey)) {         self.attr("title", $(d).attr("title"));         hit = true;       }       else {         self.attr("title", "");       }     }   }); });