Menu icon Foundation
Dropdown Hover Overlap Issue

I am using a dropdown instead of a tooltip to have some extra info pop up when a user hovers over an item in a list (so I've also added the 'data-options="is_hover:true"' parameter to the dropdown item). My issue is that since the dropdown remains open while my cursor is over the dropdown container, if I hover over a nearby list item that also has a dropdown, all dropdowns appear to remain open.

Here is an example of what's happening:

Screen shot 2014 01 24 at 9.32.01 am

Ideally, once a user moves their cursor away from the anchor tag with the reveal code attached to it, I would like the dropdown to disappear immediately (so in other words, act just like the tooltip feature). I'm not sure if there is a setting in the Foundation code (I'm using 5.0.2) that allows me to do this or I'm sure this can be done with a bit of JS. Any help would be greatly appreciated. Thanks!

P.S. Yes, I realize I could achieve what I'm looking for by using the Foundation tooltip feature but I would much rather stick to the dropdown...I have my reasons :)

dropdownhover

I am using a dropdown instead of a tooltip to have some extra info pop up when a user hovers over an item in a list (so I've also added the 'data-options="is_hover:true"' parameter to the dropdown item). My issue is that since the dropdown remains open while my cursor is over the dropdown container, if I hover over a nearby list item that also has a dropdown, all dropdowns appear to remain open.

Here is an example of what's happening:

Screen shot 2014 01 24 at 9.32.01 am

Ideally, once a user moves their cursor away from the anchor tag with the reveal code attached to it, I would like the dropdown to disappear immediately (so in other words, act just like the tooltip feature). I'm not sure if there is a setting in the Foundation code (I'm using 5.0.2) that allows me to do this or I'm sure this can be done with a bit of JS. Any help would be greatly appreciated. Thanks!

P.S. Yes, I realize I could achieve what I'm looking for by using the Foundation tooltip feature but I would much rather stick to the dropdown...I have my reasons :)

Rafi Benkual over 5 years ago

Can you post you code to get more help on this?

Adam D over 5 years ago

Thanks for the reply Rafi (and apologies for the delay). I have tried setting up a demo on JSFiddle to post on here but can't seem to recreate the issue.

I actually came up with a quick and dirty way to get around my problem with JS. Probably not the cleanest solution but it does the job.

 $('.item-with-dropdown-link').mouseout(
  function(evt) {
    evt.stopImmediatePropagation();
    evt.preventDefault();
    $('.f-dropdown').removeClass('open').css('left', '-99999px');
  }
);
$('.f-dropdown').mouseover(
  function(evt) {
    evt.stopImmediatePropagation();
    evt.preventDefault();
    $(this).removeClass('open').css('left', '-99999px');
  }
);

Rafi Benkual over 5 years ago

Thanks Adam. That will be helpful for others.

Ali Tabibzadeh over 5 years ago

Why I get so many scroll space without doing anything and these inline CSS's with this huge positioning values?

Felicyia McClelland over 4 years ago

this was extremely helpful as i was having the same overlapping issue but now when i try to hover over the content so people can click on the links i also have in the content dropdown menu the whole thing dissapears! did this happen to you and did you fix it?