Function: tooltip()

tooltip(root, o?): TooltipHandle

Defined in: packages/sdvplot/src/interact/tooltip.ts:83

An in-SVG tooltip for d3-drawn and other non-Plot figures (a Plot figure uses its own tip mark): a rounded box of text lines, the first bold, with an optional 12 px colour swatch, kept inside the svg. It is drawn hidden, with pointer-events="none", and re-appended last on each show so it stays above the marks. Its size is ESTIMATED from the text (0.6 * fontSize per character, 1.35 * fontSize per line), never measured, so it renders the same under jsdom and in every browser. Colours: --sdv-tip-bg (default rgba(34,34,34,.85)) and --sdv-tip-fg (default #ddd). Throws InputError on a non-positive fontSize or a negative size, in Node too, and when root is not an <svg>. Returns a HANDLE (show, hide, destroy), not a teardown function, because it has more to do than tear down. A no-op handle without a DOM: a server render never holds a tooltip.

Parameters

root

Element

o?

TooltipOptions = {}

Returns

TooltipHandle

Example

import { loadLeague, teamColorsSync } from "@sportsdataverse/sdvplot";
import { tooltip } from "@sportsdataverse/sdvplot/interact";
import * as d3 from "d3";

await loadLeague("nfl");
const red = teamColorsSync("nfl", "KC");
const svg = d3.create("svg").attr("viewBox", "0 0 320 120").attr("width", 320);
svg.append("circle").attr("cx", 280).attr("cy", 80).attr("r", 6).attr("fill", red ?? "currentColor");
// Kansas City's 2024 line, as a chart shows it on hover: no room right of the dot, so the box flips to its left
tooltip(svg.node() as SVGSVGElement).show(280, 80, ["KC 15-2", "Net EPA/play 0.063", "QB Patrick Mahomes"], red);
svg.node();