Search Posts

AngularJS tooltip directive not closing on iPhone 6

I’m trying to solve a bug on a tooltip directive written in AngularJS. We are creating a tooltip using a nested HTML already declared in the DOM, the directive is below.

The tooltip works fine on desktop with the tooltip showing on mouse enter and hiding on mouse leave, but on an iPhone 6, the user cannot dismiss the tooltip. Desired behaviour would be to allow the user to click elsewhere on the page in order to dismiss the tooltip. This works on my iPhone 8, but for some reason will not work on a 6. I imagine that the 6 is handling the touch events in a different way, but I can’t get to the bottom of what is wrong and how to fix it. Any help would be appreciated 🙂

function tooltipDirective() {
  return {
    restrict: 'A',
    scope: {},
    link(scope, element, attrs) {
      const tooltip = element.find('label');

      element.on(`
        ${EventType.TOUCHSTART} 
        ${EventType.MOUSEENTER} 
        ${EventType.MOUSELEAVE}`,
        positionTooltip
      );

      function positionTooltip() {
        const position = getPosition();
        positionHorizontally(position);
        positionVertically(position);
      }

      function getPosition() {
        const rect = tooltip[0].getBoundingClientRect();

        // negative values represent the element overlapping the viewport
        return {
            top: rect.top,
            left: rect.left,
            bottom:
                (window.innerHeight || document.documentElement.clientHeight) -
                rect.bottom,
            right:
                (window.innerWidth || document.documentElement.clientWidth) -
                rect.right,
        };
      }

      function positionHorizontally(position) {
        // the element fits lets leave it here
        if (position.right > 0 && position.left > 0) return;

        if (position.right < 0) {
          // the element is overlaping the right of the viewport
          tooltip.css({'left': 'auto', 'right': 0});
        } else if (position.left < 0) {
          // the element is overlaping the left of the viewport
          tooltip.css({'left': 0, 'right': 'auto'});
        }
      }

      function positionVertically(position) {
        if (position.bottom < 0) {
          // the element is overlaping the bottom of the viewport
          tooltip.css({'bottom': TOOLTIP_POSITION_SPACING, 'top': 'auto'});
        } else {
          // the element is overlaping the top of the viewport
          tooltip.css({'bottom': 'auto', 'top': TOOLTIP_POSITION_SPACING});
        }
      }
    }
  };
}

exports = tooltipDirective;

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.