可以使工具提示在Chartjs中滚动，反应？

Question

我想在Chartjs中制作可滚动的工具提示，因为我有很多数据要显示。 我已经制作了一个引用官方文档的外部HTML工具提示，但我不确定如何使其滚动。 我添加了Max-Height和Overflow-Y，以工具小组样式（如下面的代码），但它不起作用。

 const getOrCreateTooltip = (chart: any) => {
    let tooltipEl = chart.canvas.parentNode.querySelector("div");

    if (!tooltipEl) {
      tooltipEl = document.createElement("div");
      tooltipEl.style.background = "rgba(0, 0, 0, 0.7)";
      tooltipEl.style.borderRadius = "3px";
      tooltipEl.style.color = "white";
      tooltipEl.style.opacity = 1;
      tooltipEl.style.pointerEvents = "none";
      tooltipEl.style.position = "absolute";
      tooltipEl.style.transform = "translate(-50%, 0)";
      tooltipEl.style.transition = "all .1s ease";

      const table = document.createElement("table");
      table.style.margin = "0px";

      tooltipEl.appendChild(table);
      chart.canvas.parentNode.appendChild(tooltipEl);
    }

    return tooltipEl;
  };

  const externalTooltipHandler = (context: any) => {
    // Tooltip Element
    const { chart, tooltip } = context;
    const tooltipEl = getOrCreateTooltip(chart);

    // Hide if no tooltip
    if (tooltip.opacity === 0) {
      tooltipEl.style.opacity = 0;
      return;
    }

    // Set Text
    if (tooltip.body) {
      const titleLines = tooltip.title || [];
      const bodyLines = tooltip.body.map((b: any) => b.lines);

      const tableHead = document.createElement("thead");

      titleLines.forEach((title: any) => {
        const tr = document.createElement("tr");
        tr.style.borderWidth = "0";

        const th = document.createElement("th");
        th.style.borderWidth = "0";
        const text = document.createTextNode(title);

        th.appendChild(text);
        tr.appendChild(th);
        tableHead.appendChild(tr);
      });

      const tableBody = document.createElement("tbody");
      bodyLines.forEach((body: any, i: any) => {
        const colors = tooltip.labelColors[i];

        const span = document.createElement("span");
        span.style.background = colors.backgroundColor;
        span.style.borderColor = colors.borderColor;
        span.style.borderWidth = "2px";
        span.style.marginRight = "10px";
        span.style.height = "10px";
        span.style.width = "10px";
        span.style.display = "inline-block";

        const tr = document.createElement("tr");
        tr.style.fontSize = "14px";
        tr.style.backgroundColor = "inherit";
        tr.style.borderWidth = "0";

        const td = document.createElement("td");
        td.style.borderWidth = "0";

        const text = document.createTextNode(body);

        td.appendChild(span);
        td.appendChild(text);
        tr.appendChild(td);
        tableBody.appendChild(tr);
      });

      const tableRoot = tooltipEl.querySelector("table");

      while (tableRoot.firstChild) {
        tableRoot.firstChild.remove();
      }

      tableRoot.appendChild(tableHead);
      tableRoot.appendChild(tableBody);
    }

    const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;

    tooltipEl.style.opacity = 1;
    tooltipEl.style.left = positionX + tooltip.caretX + "px";
    tooltipEl.style.top = positionY + tooltip.caretY + "px";
    tooltipEl.style.font = tooltip.options.bodyFont.string;
    tooltipEl.style.padding =
      tooltip.options.padding + "px " + tooltip.options.padding + "px";

    tooltipEl.style.maxHeight = "330px";
    tooltipEl.style.overflowY = "auto";
    tooltipEl.style.zIndex = 1000;
  };

  const options = {
    maintainAspectRatio: false,
    scales: {
      x: {
        offset: true,
        grid: {
          drawTicks: false,
          offset: true,
          color: "#00001A26",
        },
        ticks: {
          color: "rgba(0 ,0 ,0 ,0.7)",
          padding: 4,
          stepSize: 1,
          font: {
            size: 12,
          },
        },
        border: {
          dash: [2, 2],
        },
        min: -3,
        max: 3,
      },
      y: {
        beginAtZero: true,
        grid: {
          drawTicks: false,
          color: "#00001A26",
        },
        ticks: {
          color: "rgba(0 ,0 ,0 ,0.7)",
          padding: 4,
          maxTicksLimit: 5,
          font: {
            size: 12,
          },
        },
        border: {
          dash: [2, 2],
          display: false,
        },
      },
    },
    plugins: {
      tooltip: {
        enabled: false,
        external: externalTooltipHandler,
      },
    },
  };

不可能使工具提示垂直滚动？

是的，这是可能的。您可以通过以下方式创建可滚动工具提示。

Answer 1

贝洛（Below）是一种示例实现，其代码可创建可滚动的外部工具提示。注意关键更改：将pointerEvents设置为"auto"

，并用

maxHeight添加overflowY: "auto"

工具提示样式。您还可以根据需要调整隐藏行为。

const getOrCreateTooltip = (chart) => {
  let tooltipEl = chart.canvas.parentNode.querySelector("div");

  if (!tooltipEl) {
    tooltipEl = document.createElement("div");
    tooltipEl.style.background = "rgba(0, 0, 0, 0.7)";
    tooltipEl.style.borderRadius = "3px";
    tooltipEl.style.color = "white";
    tooltipEl.style.opacity = 1;
    tooltipEl.style.pointerEvents = "auto"; // Allow scrolling
    tooltipEl.style.position = "absolute";
    tooltipEl.style.transform = "translate(-50%, 0)";
    tooltipEl.style.transition = "all .1s ease";
    tooltipEl.style.maxHeight = "330px"; // Fixed height for scrolling
    tooltipEl.style.overflowY = "auto";  // Enable vertical scrollbar
    tooltipEl.style.width = "200px";     // Set a fixed width (optional)
    tooltipEl.style.zIndex = 1000;

    const table = document.createElement("table");
    table.style.margin = "0px";
    tooltipEl.appendChild(table);
    chart.canvas.parentNode.appendChild(tooltipEl);
  }
  return tooltipEl;
};

const externalTooltipHandler = (context) => {
  const { chart, tooltip } = context;
  const tooltipEl = getOrCreateTooltip(chart);

  // Hide tooltip when not active
  if (tooltip.opacity === 0) {
    tooltipEl.style.opacity = 0;
    return;
  }

  // Build the tooltip content (example: a table with title and body)
  if (tooltip.body) {
    const titleLines = tooltip.title || [];
    const bodyLines = tooltip.body.map(b => b.lines);

    const tableHead = document.createElement("thead");
    titleLines.forEach(title => {
      const tr = document.createElement("tr");
      tr.style.borderWidth = "0";
      const th = document.createElement("th");
      th.style.borderWidth = "0";
      th.textContent = title;
      tr.appendChild(th);
      tableHead.appendChild(tr);
    });

    const tableBody = document.createElement("tbody");
    bodyLines.forEach((body, i) => {
      const colors = tooltip.labelColors[i];
      const span = document.createElement("span");
      span.style.background = colors.backgroundColor;
      span.style.borderColor = colors.borderColor;
      span.style.borderWidth = "2px";
      span.style.marginRight = "10px";
      span.style.height = "10px";
      span.style.width = "10px";
      span.style.display = "inline-block";

      const tr = document.createElement("tr");
      tr.style.fontSize = "14px";
      tr.style.backgroundColor = "inherit";
      tr.style.borderWidth = "0";

      const td = document.createElement("td");
      td.style.borderWidth = "0";
      td.appendChild(span);
      td.appendChild(document.createTextNode(body));
      tr.appendChild(td);
      tableBody.appendChild(tr);
    });

    const tableRoot = tooltipEl.querySelector("table");
    // Clear previous content
    while (tableRoot.firstChild) {
      tableRoot.firstChild.remove();
    }
    tableRoot.appendChild(tableHead);
    tableRoot.appendChild(tableBody);
  }

  // Position the tooltip
  const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
  tooltipEl.style.opacity = 1;
  tooltipEl.style.left = positionX + tooltip.caretX + "px";
  tooltipEl.style.top = positionY + tooltip.caretY + "px";
  tooltipEl.style.font = tooltip.options.bodyFont.string;
  tooltipEl.style.padding = tooltip.options.padding + "px";

  // Optional: if you want to delay the hiding so the user can scroll, add a timer here.
};

const options = {
  maintainAspectRatio: false,
  plugins: {
    tooltip: {
      enabled: false, // Disable default tooltip
      external: externalTooltipHandler,
    },
  },
  // ... other options
};