Skip to content
D3plus

Tooltip

Creates HTML tooltips in the body of a webpage.

Basic example

Section titled “Basic example”

A tooltip is a small HTML panel positioned next to an element or a point. Give it data (one datum per tooltip), a position (a function returning an element, or [x, y] viewport coordinates), and call render(); render with empty data to hide it. By default the title, body, and footer sections read the fields of the same name from the datum. Here it points at the box in the middle; with coordinates, calling render() again moves the panel, and it keeps itself on screen, flipping below the point when there is no room above. Charts create one of these for you and expose its settings as tooltipConfig.

const config = {
  data: [
    {
      title: "Alpha",
      body: "A tooltip built from the datum's title, body, and footer fields.",
      footer: "Edit the code to change it",
    },
  ],
};

Table content

Section titled “Table content”
const config = {
  data: [{name: "Alpha", x: 42, y: 17, share: 0.31}],
  title: d => d.name,
  thead: ["Metric", "Value"],
  tbody: [
    ["x", d => d.x],
    ["y", d => d.y],
    ["share", d => `${Math.round(d.share * 100)}%`],
  ],
};

Styling

Section titled “Styling”
const config = {
  data: [
    {
      title: "Dark theme",
      body: "background, border, padding, and borderRadius are all config keys.",
    },
  ],
  background: "#212529",
  border: "1px solid #212529",
  borderRadius: "8px",
  padding: "12px 16px",
  tooltipStyle: {color: "#f8f9fa", "font-family": "Inter, sans-serif"},
};

Configuration

import {Tooltip} from "@d3plus/core";

Extends BaseClass.

arrowStylerecord

CSS styles applied to the arrow element.

bodyStylerecord

CSS styles applied to the body element.

classNamestring | array.<string> | undefined

CSS classes added to each tooltip element, next to its fixed d3plus-tooltip class, so page CSS can style these tooltips (a chart passes its tooltipConfig.className). Takes a space-separated string or an array; a new value replaces the classes the previous one added.

colorDefaultscolordefaultsconfig

Overrides the default colors used when assigning fills from data and choosing legible text colors: dark and light (the text colors picked for contrast against a background), missing (null/undefined values), on/off (true/false values), sequential (the anchor hue for magnitude ramps), and scale (the categorical palette, given as a d3 ordinal scale or an array of colors). Keys are merged into the current defaults, and a Viz passes its overrides down to the shapes and components it draws.

configd3plusconfig

Methods that correspond to the key/value pairs and returns this class.

dataarray.<datapoint>Default [ ]

The data array used to create tooltips.

footerStylerecord

CSS styles applied to the footer element.

localestring | object

The locale used for all text and number formatting. Supports the locales defined in d3plus-format. The locale can be a complex Object, a locale code (like "en-US"), or a 2-digit language code (like "en"). If a 2-digit code is provided, the "findLocale" function is used to identify the most approximate locale.

onstring

Event listener for the specified event typenames. Mirrors the core d3-selection behavior.

parenthtmlelement | null | undefined

Parent element that scopes the tooltip's portal. Default (unset) uses the global <div id="d3plus-portal"> appended to <body>. When set, tooltips mount inside a .d3plus-tooltip-portal child of the given element instead — so multiple charts on a page don't fight over the global portal, and tooltips destroy cleanly when the chart goes away.

Viz auto-sets this when rendering: chart.tooltipClass.parent(chart._select.node().parentNode).

positionstring | array.&lt;number&gt; | htmlelement | virtualelement | function

The position of each tooltip. Can be an HTMLElement to anchor to, a virtual element (any object with a getBoundingClientRect() returning a box in client coordinates), a selection string, or coordinate points in reference to the client viewport (not the overall page). An element or box anchors the tooltip's arrow to the middle of its top edge (or its bottom edge when the tooltip flips below).

shapeConfigd3plusconfig

Configuration object with key/value pairs applied as method calls on each shape.

tableStylerecord

CSS styles applied to the table element.

tbodyStylerecord

CSS styles applied to the table body element.

tdStylerecord

An object with CSS keys and values to be applied to all <td> elements inside of each <tr>. Values may be (d, i) functions, where i is the cell's column index.

thStylerecord

An object with CSS keys and values to be applied to all <th> elements inside of the <thead>. Values may be (d, i) functions, where i is the cell's column index.

theadStylerecord

CSS styles applied to the table head element.

titleStylerecord

CSS styles applied to the title element.

tooltipStylerecord

Overall CSS styles applied to the tooltip container.

trStylerecord

An object with CSS keys and values to be applied to all <tr> elements inside of each <tbody>.

translatefunction

Defines how informational text strings should be displayed. By default, this function will try to find the string in question (which is the first argument provided to this function) inside of an internally managed translation Object. If you'd like to override to use custom text, simply pass this method your own custom formatting function.