Tooltip

Basic Configuration

The Tooltip component allows you to add informative text when hovering over a chart element. It can work within both XYContainer and SingleContainer, or as a standalone component.

Here is a minimal Tooltip configuration alongside a StackedBar chart:

Triggers

The triggers property allows a Tooltip component to display custom content for a given CSS selector.

It accepts an object of the following type:

typeof triggers = {
  [selector: string]: (
    datum: T,
    i: number,
    els: Element[]
  ) => string | HTMLElement | null | void
}

Where the key selector is the CSS class, and the value is a callback function that returns the content.

Selectors

For Unovis components, you can import selectors from @unovis/ts and use them as keys in the triggers object.

import { StackedBar } from '@unovis/ts'

const triggers = {
  [StackedBar.selectors.bar]: /* Your callback function*/
}

Trigger function

The arguments of the callback can be used to customize the string content or custom HTML element:

datum: the data point associated with the hovered element
i: the datum's array index
els: an array of all elements with the selector

tip

Returning null will hide the tooltip, while returning nothing or undefined will show the tooltip but won't render anything.

You can use this behavior to make Tooltip work with Portals (e.g. createPortal in React), when you want to render your custom tooltip component into Unovis's Tooltip.

Example: Multiple Triggers

Consider a composite XY chart with a StackedBar, Line, and Scatter components. You can define a different trigger function for individual component selectors.

import { Line, Scatter, StackedBar } from '@unovis/ts'

const triggers = {
  [StackedBar.selectors.bar]: d => `${d.y1}<br/>${d.y2}<br/>${d.y3}`,
  [Scatter.selectors.point]: d => `${(d.y1 + d.y2 + d.y3) / 3}`,
  [Line.selectors.line]: () => 'Average value'
}

Position

Horizontal Placement

Vertical Placement

Horizontal Shift

Shift the tooltip horizontally by setting the horizontalShift property. Works only with horizontalPlacement set to Position.Left or Position.Right.

Vertical Shift

Shift the tooltip vertically by setting the verticalShift property. Works only with verticalPlacement set to Position.Top or Position.Bottom.

Follow Cursor

By default, the Tooltip will follow the cursor when hovering over the chart elements. If you want the tooltip to be anchored to the hovered element, you can set the followCursor property to false.

Hoverable Content

Tooltip's content will become hoverable when you set the followCursor property to false. This will keep the content in view when hovering over the tooltip itself. This can be useful for interacting with text, links, or other elements in the tooltip. If you want to disable this behavior, you can set the allowHover property to false.

Here is an example with a Line chart a clickable link on hover:

Manual Configuration

Container

By default the Tooltip will be added to the same DOM element where your chart is located. It will also be constrained to stay within the dimensions of that element. That's not always convenient (for example when you have a sparkline chart and you need the tooltip to be displayed above it) so there's a way to set the container element manually by using the container property. In the most cases you might want to set container to document.body.

Components

Similarly, you can manually define the components a Tooltip interacts with using the components property. By default they will be passed from your chart's container (like XYContainer), but if you want to use Tooltip independently you can do that!

const tooltip = new Tooltip({
  components: [components],
  ...tooltipConfig,
})

Custom Class Name

In rare cases you might want to add a custom class name to the Tooltip component. You can do that by using the className property.

Controls

You can manually define the behavior of your Tooltip with the following methods:

hide(): hides the tooltip from view
render(content: string | HTMLElement | null | void): renders the value of content in the tooltip
place({x: number, y: number}): anchors the tooltip to the coordinate (x,y)
placeByElement(element: SVGElement | HTMLElement): anchors the tooltip to the SVG or HTML element
show(content: HTMLElement | string, pos: {x: number, y: number}): a shortcut to render and place. Shows the value of content at the coordinate (x,y)

import { VisTooltip, VisTooltipRef } from '@unovis/react'

function Tooltip() {
  const [toggled, setToggled] = React.useState(false)
  const tooltip = React.useRef<VisTooltipRef>(null)
  
  function toggleTooltip() {
    if (toggled) {
        tooltip.hide()
    } else {
        tooltip.show("👋 I'm a tooltip", { x: 0, y: 0 })
    }
    setToggled(!toggled)
  }
  return (<>
    <button onClick={toggleTooltip}>Toggle</button>
    <VisTooltip ref={tooltip}/>
  </>)
}

@ElementRef('tooltip') tooltip
toggled = false

toggleTooltip() {
  if (toggled) {
    tooltip.hide()
  } else {
    tooltip.show("👋 I'm a tooltip", { x: 0, y: 0 })
  }
  toggled = !toggled
}

<vis-tooltip #tooltip></vis-tooltip>
<button (click)="toggleTooltip">Toggle</button>

<script lang='ts'>
  import { VisTooltip } from '@unovis/svelte'

  let toggled
  
  function toggleTooltip() {
    if (toggled) {
        tooltip.hide()
    } else {
        tooltip.show("👋 I'm a tooltip", { x: 0, y: 0 })
    }
    toggled = !toggled
  }
</script>

<button onClick={toggleTooltip}>Toggle</button>
<VisTooltip bind:this={tooltip}/>

const tooltip = new Tooltip()
let toggled = false

function toggleTooltip() {
  if (toggled) {
    tooltip.hide()
  } else {
    tooltip.show("👋 I'm a tooltip", { x: 0, y: 0 })
  }
  toggled = !toggled
}
document.getElementById("btn").addEventListener('click', toggleTooltip)

Attributes

The attributes property allows you to set custom DOM attributes to Tooltip's div element. It can be useful when you need to refer to your tooltip by using a CSS selector.

CSS Variables

The Tooltip component supports additional styling via CSS variables that you can define for your visualization container. For example:

styles.css
.visualization-container-div {
  --vis-tooltip-background-color: '#3f3f3f';
  --vis-tooltip-text-color: '#fefefe';
}

All supported CSS variables

--vis-tooltip-background-color: rgba(255, 255, 255, 0.95);
--vis-tooltip-border-color: #e5e9f7;
--vis-tooltip-text-color: #000;
--vis-tooltip-shadow-color: rgba(172, 179, 184, 0.35);
--vis-tooltip-backdrop-filter: none;
--vis-tooltip-padding: 10px 15px;
 
/* Dark Theme */
--vis-dark-tooltip-background-color: rgba(30,30,30, 0.95);
--vis-dark-tooltip-text-color: #e5e9f7;
--vis-dark-tooltip-border-color: var(--vis-color-grey);
--vis-dark-tooltip-shadow-color: rgba(0,0,0, 0.95);

Component Props

Name	Type	Description
* required property

Basic Configuration​

Triggers​

Selectors​

Trigger function​

Example: Multiple Triggers​

Position​

Horizontal Placement​

Vertical Placement​

Horizontal Shift​

Vertical Shift​

Follow Cursor​

Hoverable Content​

Manual Configuration​

Container​

Components​

Custom Class Name​

Controls​

Attributes​

CSS Variables​

Component Props​