function tooltip()

in src/app/components/queue-v2/queues-v2.component.ts [483:539]

• 46 lines of code
• 7 McCabe index (conditional complexity)

function tooltip(
  selection: Selection<SVGTextElement, unknown, null, undefined>, 
  container: Selection<SVGGElement, unknown, null, undefined>,
  text: string,
): Selection<SVGGElement, unknown, null, undefined> | null {
  // if current text same as tooltip text, unnecessary render tooltip
  if(selection.text() === text) return null;
  
  const textNode = selection.node();
  const bbox = textNode?.getBBox();
  const textWidth = bbox?.width || 100;
  const textHeight = bbox?.height || 30;

  const x = bbox?.x || 0;
  const y = bbox?.y || 0;
  const padding = 10;
  const radius = 8;

  const tooltipGroup = container
    .append("g")
    .style("visibility", "hidden");

  const tooltipBg = tooltipGroup.append("rect")
    .attr("y", y - textHeight - padding) 
    .attr("width", textWidth + padding)
    .attr("height", textHeight + padding / 2)
    .attr("fill", "#00000099")
    .attr("rx", radius)
    .attr("ry", radius)
    .attr("stroke", "none");

  const tooltipText = tooltipGroup.append("text")
    .attr("y", y - textHeight / 2) 
    .attr("font-size", "25px")
    .attr("stroke", "white")
    .attr("fill", "white")
    .text(text);
    
  const tooltipTextNode = tooltipText.node();
  const tooltipTextWidth = tooltipTextNode?.getBBox().width || 100;

  tooltipText.attr("x", x + (textWidth - tooltipTextWidth) / 2);
  tooltipBg
    .attr("x", x + (textWidth - tooltipTextWidth - padding) / 2)
    .attr("width", tooltipTextWidth + padding);

  selection.on("mouseover", function() {
    tooltipGroup.style("visibility", "visible");
  });

  selection.on("mouseout", function() {
    tooltipGroup.style("visibility", "hidden");
  });

  tooltipGroup.raise();
  return tooltipGroup;
}