How to programmatically insert an Ember component into a div?

Question

I am trying to figure out a way to use Ember components as a view template for tooltips. Let me explain this:

I am supposed to create a library to show tooltips in Ember. The content of this tooltip is unknown. It might be very complex or it might be a simple text. The developer is the one who will decide it but the library must offer a way to do it easily. Also, I want to offer this solution in the format of an Ember modifier so that the developer would code it something like:

<div {{tooltip foo bar}}>
  Hello World
</div>

As the modifier offers a reference to its element it is easy to use the good old JS to create elements and append them to this element. For a simple text it works like a charm and I was able to do it already as shown in the example below, but for complex component it's better to create a component and show it inside the tooltip's container.

// tooltip.js

import { modifier } from 'ember-modifier';
import { isPresent } from '@ember/utils'

export default modifier(function tooltip(element) {
  const content = document.createElement('span')
  content.append('Hi, I am the tooltip\'s text')
  
  element.append(content)
});

The problem starts when you want to build a complex view, specially if it's supposed to contain some logic associated.

What I thought is that I could programmatically insert Ember components into the element that is passed as the argument of the modifier function. I can't use the dynamic component helper ({{component}}) as it infers that I have to mess with .hbs files more than what I am doing already and I can't approach it using the tooltip as a component; I need it to be a modifier.

I looked into this solution here but it doesn't seem to work in Ember 3.8.

Can anybody give me a clue on how do make it happen? I am using Ember 3.8 and Ember Modifier@1.0.5

score 1 · Answer 1 · answered Oct 10 '22 at 22:03

You could use the same technique that either of these use:

They allow for "any content tooltips" by using an external library (popper or floating-ui, depending -- these are important though, because positioning is hard).

The gist is the following:

modifier on the "reference" / "hook" element (what you hover over)
modifier on the "target" / "popover" / "loop" element
some code that communicates between the two modifiers to wait until both are present before rendering the tooltip in the correct location / position.

The key part missing from your original code is that you need two modifiers -- tooltips with complex content are not possible with a single modifier (unless you manually manage element references).

For ember 3.8, I don't know how much you'll be able to do.

Ember 3.28 is the oldest LTS supported now and is passed its last bugfixes date, and it will step receiving security patches in January -- see: https://emberjs.com/releases/lts/

you may be able to use 2 global modifiers and a service to communicate between them -- but I don't know how that would work when you attempt to have multiple tooltips / popovers on the screen at the same time.

The minimum ember version you need to use the two addons linked above is 3.27.

Personally, it's well worth the upgrade, as staying up to date is generally easier than leap frogging years at a time (because you have the community doing upgrades with you) -- and shiny stuff is fun :)

How to programmatically insert an Ember component into a div?

1 Answers1