Skip to main content

Flyout

Flyout exposes a concise overlay of content after a selection interaction with a component.

Example

Flyout on a default theme

Best practices

Use flyout for contextual information that supports the main flows for the user’s intentions on the page. Use them to call out additional information, such as more details about an item on the screen. Use in tutorials or with how-to structured content.

Do

  • Use a dismissible flyout to make the flyout disappear on the next click outside the button. This can be preferred for scenarios where the trigger for the flyout is a smaller target or where it’s a lower priority for the flyout to remain open.

Don’t

  • Don’t overuse flyouts. To some extent they can be perceived as interrupting workflow and too many can be a bad user experience.
  • Don’t open a flyout from within another flyout.
  • Don’t use it to contain a menu, use the menu component instead.
  • Don’t use it to ask the user to confirm an action, use a dialog instead.
  • Don’t block important UI with the placement of your flyout.
  • Don’t try to show flyouts on hidden elements.

Also known as

Popover

Related

Button
Tooltip

Accessibility

The flyout comes in two types: tooltip and dialog, depending on content:

  • Tooltip flyout: Apply the role="tooltip to the flyout element when the flyout contains text only.
  • Dialog flyout: Apply the role="dialog" to the flyout element when it contains an interactive element, such as a button. For accessibility, apply the aria-describedby attribute to the flyout element, with the id of the c-paragraph it contains, to link these together. Add a name attribute with descriptive text to triggering element.

Options

  • Placement Right (Default): Set value right (default) to place flyout to the right of the entry point.
  • Placement Left: Set data attribute data-js-flyout-placement to left to place the flyout to the left of the entry point.
  • Placement Top: Set value top (default) to place flyout above the entry point.
  • Placement Bottom: Set value bottom (default) to place flyout below the entry point.
  • Triggering element: Apply the data-attribute aria-describedby="flyout-id" to the triggering element. This id should match the id on the flyout.
  • Dismissing: Set data attribute data-js-flyout-dismissible to false and it will be dismissed by clicking the entry point a second time or clicking on an optional “Close” button inside the flyout. When data-js-flyout-dismissible is set to true, flyout is dismissible by clicking anywhere outside the entry point, excluding clicking on the flyout itself.
  • Beak: Add the f-beak option to the flyout div to add an beak.

Development

  • Schema definition: The flyout schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Placement top, tooltip version (triggered by element with aria-describedby="topFlyoutExample")

<div class="c-flyout" id="topFlyoutExample" role="tooltip" data-js-flyout-placement="top" data-js-flyout-dismissible="true" aria-hidden="true">
    <p class="c-paragraph">Paragraph lorem ipsum sit amet, consectetur adipiscing elit. Duis ut commodo ante.</p>
</div>

Beak placement top, tooltip version (triggered by element with aria-describedby="beakTopFlyoutExample")

<div class="c-flyout f-beak" id="beakTopFlyoutExample" role="tooltip" data-js-flyout-placement="top" data-js-flyout-dismissible="true" aria-hidden="true">
    <p class="c-paragraph">Paragraph lorem ipsum sit amet, consectetur adipiscing elit. Duis ut commodo ante.</p>
</div>

Placement right, tooltip version (triggered by element with aria-describedby="rightFlyoutExample")

<div class="c-flyout" id="rightFlyoutExample" role="tooltip" data-js-flyout-placement="right" data-js-flyout-dismissible="true" aria-hidden="true">
    <p class="c-paragraph">Paragraph lorem ipsum sit amet, consectetur adipiscing elit. Duis ut commodo ante.</p>
</div>

Beak placement right, tooltip version (triggered by element with aria-describedby="beakRightFlyoutExample")

<div class="c-flyout f-beak" id="beakRightFlyoutExample" role="tooltip" data-js-flyout-placement="right" data-js-flyout-dismissible="true" aria-hidden="true">
    <p class="c-paragraph">Paragraph lorem ipsum sit amet, consectetur adipiscing elit. Duis ut commodo ante.</p>
</div>

Placement bottom, tooltip version, not dismissible (dismiss by clicking on the launching button, triggered by element with aria-describedby="bottomFlyoutExample")

<div class="c-flyout" id="bottomFlyoutExample" role="tooltip" data-js-flyout-placement="bottom" data-js-flyout-dismissible="false" aria-hidden="true">
    <p class="c-paragraph">Paragraph lorem ipsum sit amet, consectetur adipiscing elit. Duis ut commodo ante.</p>
</div>

Beak placement bottom, tooltip version, not dismissible (dismiss by clicking on the launching button, triggered by element with aria-describedby="beakBottomFlyoutExample")

<div class="c-flyout f-beak" id="beakBottomFlyoutExample" role="tooltip" data-js-flyout-placement="bottom" data-js-flyout-dismissible="false" aria-hidden="true">
    <p class="c-paragraph">Paragraph lorem ipsum sit amet, consectetur adipiscing elit. Duis ut commodo ante.</p>
</div>

Placement left, tooltip version, not dismissible (dismiss by clicking on the launching button, triggered by element with aria-describedby="leftFlyoutExample")

<div class="c-flyout" id="leftFlyoutExample" role="tooltip" data-js-flyout-placement="left" data-js-flyout-dismissible="false" aria-hidden="true">
    <p class="c-paragraph">Paragraph lorem ipsum sit amet, consectetur adipiscing elit. Duis ut commodo ante.</p>
</div>

Beak placement left, tooltip version, not dismissible (dismiss by clicking on the launching button, triggered by element with aria-describedby="beakLeftFlyoutExample")

<div class="c-flyout f-beak" id="beakLeftFlyoutExample" role="tooltip" data-js-flyout-placement="left" data-js-flyout-dismissible="false" aria-hidden="true">
    <p class="c-paragraph">Paragraph lorem ipsum sit amet, consectetur adipiscing elit. Duis ut commodo ante.</p>
</div>

Placement right, dialog version (contains interaction within the flyout, triggered by element with aria-describedby="beakBottomFlyoutExample")

<div class="c-flyout" id="dialogFlyoutExample" role="dialog" aria-describedby="dialogFlyoutTextExample" data-js-flyout-placement="right" data-js-flyout-dismissible="true" aria-hidden="true">
    <p id="dialogFlyoutTextExample" class="c-paragraph">Paragraph lorem ipsum sit amet, consectetur adipiscing elit. Duis ut commodo ante.</p>
    <button class="c-button">Proceed</button>
</div>