jQuery Hover Error in IE9

Question

I'm having a real problem with IE9, i've written some code with a fellow SO user whom has got me this far but i'm scratching my head on how to so this as my jQuery skills are not to great.

This code work perfectly how I want it to in other browser's but it doesn't work in IE9 the way I would want it to. The reason for asking is that about half of the office are still using IE9 and they are not looking to upgrade.

What is does is when the user hovers over the purple circle a box appears detailing some information and the whole box is link-able to a page in the site. If you move your mouse anywhere around the circle the box doesn't appear, it only appears when the user hovers over the circle, which is what I want. What its doing in IE9 is if you move around the top of the circle the box appears, so in IE9 the box is invisible but its still works if the user mouse is above the button.

To understand my problem better if you view it in any other browser above IE9 you will see that it works fine. Then view it in IE9 and its seems fine until you move your cursor just above one of the circles and the title pops up, because a few circles are close together the titles get very jumpy and most of the time the text dosent match the place.

Now I know IE9 doesn't fully support CSS3 and HTML5 and I believe the problem to be something todo with data-item="" that IE9 partial supports it or something i'm not quite sure.

I shall include the HTML, CSS and jQuery Code and also a JSFiddle, any help would be great.

Heres the JSFiddle

Below is the HTML code:

Below is the CSS Code:

  .tooltip {
  position: relative;
  display: inline-block;
  height: 18px;
  width: 18px;
  line-height: 26px;
  padding: 0 0;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  background: #b71a71;
  box-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  top: 100px; left: 300px;
}
.tooltip.current {
  background: #b1d12d;
}

.tooltip:hover {
  background: #b1d12d;
}
.tooltip-wrapper {
  pointer-events: none;
  position: absolute;
  width: 250px;
  margin-left: -125px;
  left: 50%;
  bottom: 100%;
  margin-bottom: 5px;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.js-tooltip-active .tooltip-wrapper,
.tooltip:hover .tooltip-wrapper,
.tooltip-wrapper:hover {
  pointer-events: auto;
  opacity: 1;
}
.tooltip-wrapper:after {
  z-index: 11;
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -7px;
  content: " ";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #333;
}
.tooltip-wrapper:before {
  bottom: -9px;
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  content: " ";
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(255,255,255,0.1);
}
.tooltip-text {
  display: inline-block;
  position: relative;
  padding: 6px 9px;
  z-index: 10;
  white-space: normal;
  font-size: 12px;
  font-weight: normal;
  line-height: 18px;
  background: #333;
  background: rgba(0,0,0,0.8);
  color: #fff;
  border-radius: 5px;
  text-shadow: none;
  cursor: default;
  box-shadow: 0 0 rgba(255,255,255,0.1);
}

#locationList li a.active {
    color:#b71a71;
}

Below is the jQuery Code:

$(document).ready(function() {
$('.js-tooltip').on('click', function () {
  $(this).toggleClass('js-tooltip-active');
});

$('.tooltip').hover(function() {
     $('a[data-item="'+this.id+'"]').toggleClass('active');
});

  $('#locationList a').hover(function() {
    $('#' + $(this).data('item')).toggleClass('js-tooltip-active');
    $('#' + $(this).data('item')).toggleClass('current');
});
});

Thanks.

nwronski · Accepted Answer

It appears that your problem is coming from hiding the tooltip using

.tooltip-wrapper {
    ...
    opacity: 0;
}

The element still occupies space even though you cannot see it. If you hide the element using something like

.tooltip-wrapper {
    ...
    display: none;
}

and then show the element again from the selector you have below it using

.js-tooltip-active .tooltip-wrapper,
.tooltip:hover .tooltip-wrapper,
.tooltip-wrapper:hover {
  ...
  display: block;
}

you eliminate the unexpected results you are experiencing in IE 9. This will eliminate your fade-in effect so you might want to conditionally apply this rule just to IE9 since it appears to be working in the other browsers you are testing. Consider using an existing library for your tooltips such as TipTip which I believe allows sticky tooltips like the ones you are trying to implement.

Edit: I forgot to mention, another source of your problems is possibly the use of the pointer-events CSS rule, which is not supported by IE 9.

Edit: jsfiddle

jQuery Hover Error in IE9

Answers (1)

Related Questions