tooltip.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<svg id="network" width="600" height="380"></svg>

<script type="module">
  /* globals bootstrap */
  import { network } from "https://cdn.jsdelivr.net/npm/@gramex/network@2";
  import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

  // Load the data
  const data = await fetch("flare.json").then((r) => r.json());
  var root = d3.hierarchy(data);

  // Create the network
  const graph = network("#network", { links: root.links(), nodes: root.descendants(), d3 });

  // Style the network
  const color = d3.scaleOrdinal(d3.schemeCategory10);
  graph.nodes
    .attr("fill", (d) => color(d.depth))
    .attr("r", (d) => 10 - d.depth * 2)
    .attr("data-bs-toggle", "tooltip")
    .attr("title", (d) => d.data.name);
  graph.links.attr("stroke", "rgba(0,0,0,0.2)");

  new bootstrap.Tooltip("#network", { selector: '[data-bs-toggle="tooltip"]' });
</script>