Inline dialog

Inline dialogs are containers for small amounts of secondary content and controls that are displayed on user request, while keeping the rest of the page fully visible.

If there is lots of content to be displayed, or complex interactions required, consider applying a modal dialog instead. Only one inline dialog can be open at any point in time. When creating rich interactive dropdown elements (like a dropdown with a built-in search component), rather mimic standard dropdown layouts.

You can also improve feature discoverability with inline dialog which is a part of in-product help pattern.

Example call out image
Trigger:
Usually displayed on 'clicking' a UI component, not on hover.
Notch:
The notch position and direction should be centered and at the top of the inline dialog where possible.
Dialog actions:
The main action should be a secondary button, other actions should be link buttons. In most cases, there should be two actions or less. As inline dialogs can display information, non-descript action labels (like 'Done') can be applied. Dismiss the dialog automatically if the action taken by the user inside the dialog is successful.