Skip to main content

Tooltip

    Tooltip​

    The MapView component displays a tooltip by default when hovering over data points from any of the data layers. Every data layer has its own default tooltip due to differences in data shape.

    To customize the tooltip, add a Tooltip subcomponent inside the data layer (e.g. DotLayer.Tooltip, BubbleLayer.Tooltip, etc.) and provide a custom template as children. When a Tooltip subcomponent is provided without children, the default tooltip is used.

    To hide the tooltip entirely, set the hidden prop on the layer's Tooltip subcomponent:

    <DotLayer.Tooltip hidden />

    Customize Tooltip​

    The tooltip can be customized using a template-based approach with Tooltip.Header, Tooltip.Body, and Tooltip.Footer sections for full layout control.

    Each data layer page documents how to pass a render function as children of its .Tooltip slot and which data the render function receives. See DotLayer, BubbleLayer, ConnectionLayer, and ChoroplethLayer for examples.

    Every .Tooltip slot also accepts the following optional props:

    • hidden — set to true to opt out of the tooltip entirely for that layer.
    • symbolAlignment — overrides the horizontal alignment of series symbols inside the default tooltip. Accepted values are 'left' (default) and 'right'.

    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.

    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.

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

    Tooltip Atoms​

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

    Still have questions?
    Find answers in the Dynatrace Community