Floating
<Floating> renders content in a floating layer using @floating-ui — the lower-level positioning primitive behind <Attach::Tooltip>, <Attach::Popover>, and dropdowns.
<Floating>
<Floating> is a low-level utility for rendering an element in a floating layer (typically a portal) and positioning it relative to a trigger. It's used internally by tooltips, popovers, and dropdowns — most extension authors won't reach for it directly, but it's available if you need a custom positioning solution.
Basic Usage
<button {{on 'click' this.toggle}}>Show details</button>
{{#if this.isOpen}}
<Floating @placement='bottom-start'>
<div class='rounded bg-white p-4 shadow'>
Floating content
</div>
</Floating>
{{/if}}Arguments
| Argument | Type | Description |
|---|---|---|
@placement | string | Initial placement — top, bottom, left, right, plus -start / -end variants |
@arrow | boolean | Render an arrow pointing at the reference |
@renderInPlace | boolean | Render in DOM order instead of via a portal |
@ariaRole | string | ARIA role for the floating element |
Any additional ...attributes are forwarded to the floating element.
When to Use
For most positioning needs, prefer the higher-level components:
<Attach::Tooltip>— tooltips on hover (shows onmouseenter focus)<Attach::Popover>— popovers on click or hover, supports interactive content<DropdownButton>— button + menu combo
Reach for <Floating> directly only when those higher-level components don't fit.
Source
| File | Description |
|---|---|
addon/components/floating.hbs | Template — renders into a portal via {{in-element}} |
addon/components/floating.js | Class — handles parent finding and positioning |
addon/components/portal/ | The portal helper used for non-in-place rendering |
addon/components/attach/ | Higher-level Tooltip / Popover wrappers |
Resource Layouts
<Layout::Resource::Tabular>, <Layout::Resource::Card>, <Layout::Resource::CardsGrid>, and <Layout::Resource::Panel> — pre-built page layouts for resource list views.
Attach::Tooltip
<Attach::Tooltip> renders a tooltip attached to its parent element. Wraps <Attach::Popover> with tooltip-friendly defaults — hover/focus triggers, top placement, fade animation.