CODEWITHSUNDEEP
javascriptjquerycss
glenho123
glenho123

Reputation: 577

Hover for elements underneath others

I have a situation where I want to provide some contextual help with tooltips...However, the elements I have are sometimes underneath an absolute positioned element.

Whilst I realise this is probably impossible I was thinking there was away to interrogate elements underneath the top layered element?

Im just not sure how this would be done. I dont mind using either css or javascript but any help in the right direction would be appreciated.

Please see the image for the absolute positioned div (grey box with red scribble) over the bars underneath.

Please note that the Green bar is position relative while the individual bars are also positioned : absolute.

Absolute Div

Upvotes: 2

Views: 175

Answers (2)

hector-j-rivas
hector-j-rivas

Reputation: 807

You have to check for a mouse hit inside each child div; Here's a fiddle for it https://jsfiddle.net/6rx18d56/1. The 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, I knew that was coming. Check out https://jsfiddle.net/6rx18d56/2/. I've made it somewhat more generic, hopefully you have some ID and class names rationale in your charts. Anyways, the hit test being the same, we just loop through elements with jQuery, keeping track of the originating overlay and whether a hit has already 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", "");
      }
    }
  });
});

Upvotes: 1

Toby
Toby

Reputation: 13385

You can use jQuery's position, although it will end up being fairly verbose:

var pos = $("myDiv").position();

Then determine position by:

console.log(pos.left, pos.top, pos.right, pos.bottom)

Read here for more info:

https://api.jquery.com/position/

Then you can check on .mousemove if it's within the bounds of the div. Read here:

https://api.jquery.com/mousemove/

However, there's a pretty good chance this isfar too complex for average use.

Upvotes: 0

Related Questions