mouseenter trigger programmatically

by Artem

HTML

<div>
  <button id="show">Show toolip</button>
  <button id="hide">Hide toolip</button>
</div>
<div id="container">
  Hover to see the tooltip
  <div id="tooltip" hidden>Tooltip</div>
</div>

JavaScript

'use strict';

const container = document.getElementById('container');
const tooltip = document.getElementById('tooltip');

// APP code
container.addEventListener('mouseenter', () => {
  tooltip.hidden = false;
});

container.addEventListener('mouseleave', () => {
  tooltip.hidden = true;
});

const showButton = document.getElementById('show');
const hideButton = document.getElementById('hide');

showButton.onclick = () => {
  const mouseenterEvent = new MouseEvent('mouseenter', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  
  container.dispatchEvent(mouseenterEvent);
};

hideButton.onclick = () => {
  const mouseleaveEvent = new MouseEvent('mouseleave', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  
  container.dispatchEvent(mouseleaveEvent);
};