I have some code to create my tooltip, but it is not hovering by the mouse, it takes up the entire width of the page instead. I used an example on the d3.js page.

var tooltip = d3
  .select("#chart")
  .append("div")
  .style("opacity", 0)
  .attr("class", "tooltip")
  .style("background-color", "white")
  .style("border", "solid")
  .style("border-width", "1px")
  .style("border-radius", "5px")
  .style("padding", "10px");

//creating mouseover function
const mouseover = function (event, d) {
  const subgroupName = d3.select(this.parentNode).datum().key;
  const subgroupValue = d.data[subgroupName];
  tooltip
    .html("Status: " + subgroupName + "<br>" + "Count: " + +subgroupValue)
    .style("opacity", 1);
};
const mousemove = function (event, d) {
  tooltip
    .style("transform", "translateY(-55%)")
    .style("left", event.x / 2 + "px")
    .style("top", event.y / 2 - 30 + "px");
};
const mouseleave = function (event, d) {
  tooltip.style("opacity", 0);
};

This is what it looks like when I hover over one of the bars currently. https://i.stack.imgur.com/1nBjC.png