I'm wondering why a mouseenter/leave function doesn't work in IE, but works in all other browsers?

When mouse entering, a tooltip should appear & a little pinched tail fades in.  In IE, only hovering over the imgborder element (which is above the img & is positioned absolutely) produces the tail.  When further hovering into the image, the tail disappears.

Here's a test page:   http://www.partiproductions.com/exhibittooltip_test/index.html

My Script:

2. $('.exhibit_tooltip_imgbord').on({
3.     mouseenter: function() {
4.       if ("%id=tailstyle%" == "pintri") {  /* pinched triangle mouseenter */
5.         $('.exhibit_tooltip_bg').promise().done(function() {
6.           $('.pintrib, .pintri1, .pintri2').animate({opacity: 1}, 1500)})}
7.       $('#exhibit_tooltip_img').trigger('mouseenter')},
8.     mouseleave: function() {
9.       if ("%id=tailstyle%" == "pintri") {  /* pinched triangle mouseleave */
10.         $('.exhibit_tooltip_bg').promise().done(function() {
11.       $('.pintrib, .pintri1, .pintri2').animate({opacity: 0}, 100)})}
12.       $('#exhibit_tooltip_img').trigger('mouseleave')}});

How do I fix this for IE?

Thanks, Bill