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

Posted 2023-03-25

【中文标题】如何自动将工具提示文本内容包装到多行？

【英文标题】：How can I automatically wrap tooltip text content to multiple lines?

【发布时间】：2021-02-27 19:41:26

【问题描述】：

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

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

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

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

【问题讨论】：

这能回答你的问题吗？ Chartjs Tooltip Line Breaks

@DanielBeck 否。该问题已在我的问题中链接，并且没有提供“自动将文本换行到多行”的方法

对，对不起。没发现你已经链接了它，我的错

@DanielBeck 不用担心，感谢您撤回关闭投票

【参考方案1】：

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

Here 是使用自定义tooltips 的一些示例。

我们关闭画布工具提示。

enabled: false

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

我们的tooltipTitleCallback 和tooltipLabelCallback 函数将需要根据我们传入的参数进行修改。在此示例中，我们在tooltipTitleCallback 函数中使用工具提示的dataPoints 属性。数据属性中可用的项目由使用的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"  ></canvas>
<div id="tooltip"></div>

Codepen

【讨论】：

这更多是关于如何创建自己的工具提示的解决方法。由于 Chartjs 是一个开源项目，如果我们对现有代码做出贡献而不是仅仅解决它会更好。显然它并不适合所有人。

@Webber Fair point - 我们在软件方面的经验可以帮助 ChartJS 为每个人改进代码。在提供修复和新功能时，我们需要遵循 community guidelines。以上是原发帖人在考虑时间限制和语言和框架经验时考虑的解决方案。文档确实说：“自定义工具提示允许您挂钩到工具提示呈现过程，以便您可以以自己的自定义方式呈现工具提示。”

是的，很公平。我更期待以改变工具提示宽度的形式得到答案，因为它被切断了；或者一个回答提到如何在工具提示中放置这么多单词并不是一个很好的做法，因为还有更好的方式来呈现信息。