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

Question

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

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

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

它确实允许回调返回一个字符串数组，它将通过换行符分隔。目前我能想到的唯一解决方法是测量每个工具提示的长度，如果文本足够长（不响应或不理想），则将文本拆分为数组。如果这个问题有一个简单的解决方案，我宁愿不重新制造轮子。感谢您的帮助。

Answer 1

ChartJS 2.0 的解决方案。我们可以提供一个函数来构建 HTML 工具提示。

这里是一些使用自定义工具提示的示例。

我们关闭画布工具提示。

enabled: false

我们使用工具提示不透明度状态来显示或隐藏我们的自定义工具提示。当触发

hover

事件时，状态会更新。

我们的

tooltipTitleCallback

和

tooltipLabelCallback

函数需要根据我们传入的参数进行修改。在本示例中，我们在 dataPoints

 函数中使用工具提示的 

tooltipTitleCallback 属性。数据属性中可用的项目由所使用的交互模式决定。

这里是工具提示模型中的一些其他属性。

为了防止工具提示超出屏幕右侧，我们设置

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>

代码笔

Answer 2

以数组形式返回行

plugins:{
  tooltip: {
    callbacks: {
        label: (context) => {
          //your can console.log(context) here to see what 
          //values you can customise your tooltip message with. 
          //Other values from functions in your script are also accessible.
          return [
                   `context.raw`//your value
                   `line 2 can be any string or ${variable}`
                 ]
        }
    }
  }
}