tooltip-modifier

components.tooltip\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  @tracked container;
  
  constructor(owner, args) {
    super(owner, args);
    this.container = this.createContainerElement();
  }
  
  createContainerElement() {
    const container = document.createElement('div');
    document.body.append(container);
    container.style.display = 'none';
    return container;
  }
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

modifiers.tooltip\.js

import { modifier } from 'ember-modifier';

export default modifier(function (element, args) {
  const container = args[0];
  
  function showTooltip() {
    container.style.display = 'block';
  }
  
  function hideTooltip() {
    container.style.display = 'none';
  }
  
  const target = element.parentElement;
  target.addEventListener('mouseenter', showTooltip);
	target.addEventListener('mouseleave', hideTooltip);
  
  // once we get the reference of the target element,
  // we can remove the placeholder element safely.
  element.remove();
  
  return () => {
  	target.removeEventListener('mouseenter', showTooltip);
    target.removeEventListener('mouseleave', hideTooltip);
  }
});

templates.application\.hbs

<button type="button">
	<span>Hover to show a toolip</span>
  
  <Tooltip>
  	Hi, this is a <strong>{{this.appName}}</strong> tooltip.
  </Tooltip>
</button>

templates.components.tooltip\.hbs

<div {{tooltip this.container}}></div>

{{#-in-element this.container}}
  {{yield}}
{{/-in-element}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": true,
    "_APPLICATION_TEMPLATE_WRAPPER": false,
    "_JQUERY_INTEGRATION": false
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-modifier": "1.0.3"
  }
}