Skip to main content

Tooltip

    Add Tooltip​

    The MapView component has an optional tooltip that displays additional data point information when hovering over data points from any of the data layers. To enable the tooltip a Tooltip subcomponent should be used inside the data layer component (e.g. DotLayer.Tooltip, BubbleLayer.Tooltip, etc.). When a Tooltip subcomponent is provided without any children, the default tooltip will be used. Every data layer has its own default tooltip due to data shape difference.

    Customize Tooltip​

    Tooltip sections​

    It's possible to customize the tooltip by providing a custom template that can consist of tooltip sections, items, and atoms. The Tooltip comprises three main sections: Tooltip.Header, Tooltip.Body, and Tooltip.Footer. Each section can contain different subsections, items, and atoms.

    The Tooltip.Header serves as the topmost part of the tooltip and it always contains a divider at its bottom. It is also possible to set an optional Tooltip.Subheader within a Tooltip.Header to add additional information that is rendered in a new block.

    The Tooltip.Body is the central and interactive part of the tooltip. The Tooltip.Body content is virtualized by default to improve performance, and it can be disabled by setting the virtualization prop to false.

    In order to have a proper virtualization, the itemHeight prop, which is the height of every Tooltip.Item subcomponent within the Tooltip.Body, is needed.

    The Tooltip.Footer subcomponent always includes a divider at the top. This section can be used to display the total number of items available or any other contextual information.

    CodeSandbox

    Items​

    Tooltip.Items are independent components that can be placed in the header, body, or footer sections. Each of these items serve a specific purpose and acts as a flexbox. It is recommended nesting Tooltip.Symbol, Tooltip.Content, and Tooltip.Value within the Tooltip.Item so that the space will be distributed evenly.

    CodeSandbox

    The tooltip template can nest any custom HTML and styles can be overridden.

    CodeSandbox

    Tooltip Atoms​

    Multiple Tooltip.Item components can be combined in various ways, and the space distribution is flexible, allowing their arrangement according to preferences.

    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community