Skip to main content

ui:portal

View as Markdown
View Sourcefor PortalViewHelper viewhelper↗

This ViewHelper allows you to render content in a different part of the DOM tree than where it is defined. This is particularly useful for modals, tooltips, or any component that needs to break out of its parent container for styling or positioning reasons.

With the default name, portalled content is rendered automatically at the end of <body> - no further setup needed. Pass a custom name together with a matching ui:portalContainer ViewHelper if you want portalled content to end up somewhere else instead.

Example

Common use case inside Tooltip/Content.html:

<ui:portal>
    <primitives:tooltip.positioner>
        <primitives:tooltip.content>
            <primitives:tooltip.arrow />
            <f:slot />
        </primitives:tooltip.content>
    </primitives:tooltip.positioner>
</ui:portal>

Arguments

Name Type Description Required Default
name string The name of the target container No 'default'
disabled bool If set to true, the portal functionality is disabled and content is rendered in place No false