时间戳

首页 > 解决方案 > 如何自动将工具提示文本内容包装到多行？

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

问题描述

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

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

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

截断的工具提示

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

标签： javascripthtml5-canvaschart.js

解决方案

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

以下是一些使用自定义工具提示的示例。

我们关闭画布工具提示。

enabled: false

我们使用工具提示不透明度状态来显示或隐藏我们的自定义工具提示。hover触发事件时更新状态。

我们的tooltipTitleCallback和tooltipLabelCallback函数需要根据我们传入的参数进行修改。在这个例子中，我们在函数中使用了工具提示的dataPoints属性。tooltipTitleCallback数据属性中可用的项目由使用的交互模式决定。

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

为了防止工具提示越过屏幕的右侧，我们设置了rightposition 属性而不是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>

密码笔

推荐阅读