Skip to main content

Tooltip

    Use the Tooltip component to display extra information when users hover on a trigger element.

    OverviewPropertiesUsageChangelog

    Import​

    import { Tooltip } from '@dynatrace/strato-components/overlays';

    Demo​

    The Tooltip component shows brief, helpful information when users hover on a trigger. The trigger element must be interactive. See Usage for best practices.

    Placement​

    Use the placement prop to set the position of the tooltip relative to the trigger element. The default placement is at the top.

    Accessibility​

    The content of the tooltip isn't accessible to screen readers by default. If the trigger doesn't include a label, it's only an icon for example, and there isn't an aria-label, you must link the tooltip text to the trigger.

    Pass an id property to the tooltip itself and add an aria-describedby or an aria-labelledby property to the trigger and reference the id.

    In choosing which property to use, consider that a label describes the thing itself (Example: Edit button), whereas a description describes an action or purpose (Example: Allows you to change the title and text of the document).

    Still have questions?
    Find answers in the Dynatrace Community