javascript - 如何将工具提示文本内容自动换行到多行？

Question

我正在使用 ChartJS生成一些图表。数据点工具提示是通过配置选项使用回调生成的:

tooltips: {
    position: 'average',
    mode: 'index',
    intersect: false,
    callbacks: {
        title: tooltipTitleCallback,
        label: tooltipLabelCallback
    }
},

回调返回一个不同长度的字符串。我的问题是 ChartJS 似乎没有提供任何方法来自动将文本换行到多行(类似于 Bootstrap 工具提示)。相反，任何不适合 1 行的文本都会被 chop 。

它确实允许回调到 return an array of strings它将由换行符分隔。目前我能想到的唯一解决方法是测量每个工具提示的长度，如果文本足够长(不响应或不理想)，则将其拆分为一个数组。如果这个问题有一个简单的解决方案，我宁愿不重新制作轮子。谢谢你的帮助。

Answer 1

ChartJS 2.0 的解决方案。我们可以提供一个函数来构建 HTML 工具提示 .
Here是一些使用自定义的示例 tooltips .
我们关闭 Canvas 工具提示。enabled: false我们使用工具提示不透明度状态来显示或隐藏我们的自定义工具提示。状态在 hover 时更新事件被触发。
我们的 tooltipTitleCallback和 tooltipLabelCallback函数需要根据我们传入的参数进行修改。在这个例子中，我们使用工具提示的 dataPoints 我们的属性(property)tooltipTitleCallback功能。数据属性中可用的项目由 interaction mode 决定。用过的。
Here是工具提示模型中的一些其他属性。
为了防止工具提示越过屏幕的右侧，我们设置了 right位置属性而不是 left .
工作示例

const ctx = document.getElementById("myChart").getContext("2d");

const customTooltip = {
  mode: "index",
  enabled: false,
  custom: function(model) {
    const tooltip = document.getElementById("tooltip");

    if (model.opacity === 0) {
      tooltip.style.opacity = 0;
      return;
    }

    if (model.body) {
      const title = "<strong>" + tooltipTitleCallback(model.dataPoints) + "</strong>";
      const label =
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eros non massa consequat, ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eros non massa consequat, ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eros non massa consequat, ac.";

      tooltip.innerHTML = title + "<br />" + label;

      tooltip.style.left = "auto";
      tooltip.style.right = "auto";

      const pos = this._chart.canvas.getBoundingClientRect();

      if (model.xAlign === "left") {
        tooltip.style.left = pos.left + model.caretX + "px";
      } else {
        tooltip.style.right = pos.right - model.caretX + "px";
      }

      tooltip.style.top = -50 + pos.top + model.caretY + "px";
      tooltip.style.opacity = 1;
    }
  }
};

const myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My First dataset",
      backgroundColor: "rgb(255, 99, 132)",
      borderColor: "rgb(255, 99, 132)",
      data: [0, 10, 5, 2, 20, 30, 45],
      fill: false
    }]
  },
  options: {
    tooltips: customTooltip
  }
});

function tooltipTitleCallback(items) {
  if (items.length > 0) {
    const item = items[0];

    if (item.label) {
      return item.label;
    }

    return "No title";
  }
}

#tooltip {
  opacity: 0;
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 3px;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
  pointer-events: none;
  padding: 4px;
  margin: 15px;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 13px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
<div id="tooltip"></div>

Codepen