Skip to main content

ui:portal

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.

You need to use this ViewHelper in conjunction with the ui:portalContainer ViewHelper, which acts as the target container for all portalled content.

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'