Skip to main content

tooltip

KC 15-2Net EPA/play 0.063QB Patrick Mahomes
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();

Tags: docstring · tooltip. All sdvplot examples.