Floating-ui in an ember friendly way

Questions
1

New to Ember.js.

I’m looking for a generic mouseover text utility. I found floating-ui and I mostly understand the vanilla tutorial. But I don’t understand how to make this into a generic modifier/helper…

Are there any good examples, libraries, etc. that provide an out of the box mouse over text?

2

At my company we have a small modifier called tooltip that wraps tippy.js.

Using ember-modifier the basic idea is to do something like this:

import { modifier } from 'ember-modifier';
import tippy from 'tippy';

export default modifier((element, [tooltipText]) => {
  // attach the tooltip to the element (when the modifier is created)
  const tippyRef = tippy(element, { ... });

  // this probably isn't even necessary in this case, but for completeness you could do basic cleanup...
  return () => {
    // remove the tooltip stuff from the element (when the modifier is torn down)
    tippyRef?.destroy();
  }
});

So ideally you find a tooltip/popover/float/hover library that you like (or hand roll one if you really want) and that makes sense semantically, then the basic idea is:

  • attach the library/thing to the element in the “modify” function
  • do any necessary teardown (if any) in the teardown callback
1 Like
3

Thank you. That helps a lot. You got me going in the right direction and now I have it working!

2 Likes