HighChart Tooltip 断字问题答案

【问题标题】：HighChart Tooltip word-break issueHighChart Tooltip 断字问题
【发布时间】：2016-08-07 10:01:12
【问题描述】：

我搜索了很多，但我没有找到任何适合我的问题的解决方案。我正在使用 HighChart 插件来创建饼图和条形图。

我的问题是，将鼠标悬停在任何条形图或饼图上后会出现默认工具提示，因为我想使用 css 属性 word-break & white-space 在该工具提示中。现在，如果文本超出容器宽度，则会被剪切。

我尝试覆盖 .highcharts-tooltip css 但无法正常工作。参见示例，将鼠标悬停在蓝色和黑色切片上，您将了解我面临的问题。

.highcharts-tooltip {
word-break: break-word !important;    
white-space: normal !important;

}

这里是JsFiddle

感谢任何帮助。

提前致谢

【问题讨论】：

标签： javascript html css highcharts

【解决方案1】：

为了能够像这样自定义工具提示，您需要将工具提示选项 useHtml 设置为 true：

tooltip: {
  useHTML: true
}

来自 Higcharts 文档：

useHTML：BooleanSince 2.2

使用 HTML 而不是 SVG 来呈现工具提示的内容。使用 HTML 允许在工具提示中使用表格和图像等高级格式。

然后需要给.highcharts-tooltip的span元素设置CSS属性（我还加了固定宽度）：

.highcharts-tooltip span {
   width: 140px;
   white-space:normal !important;
}

工作Fiddle

【讨论】：

【解决方案2】：

只需为工具提示启用useHTML 属性，您就可以设置自己的工具提示样式（包括word-break 和white-space。

tooltip: {
    useHTML: true,
  formatter: function() {
    return "<div class='tooltip-key'><span>" + this.key + "</span></div>"
  }
},

查看fiddle 或运行下面的sn-p

$(function() {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market shares January, 2015 to May, 2015'
        },
        tooltip: {
        	useHTML: true,
          formatter: function() {
          	return "<div class='tooltip-key'><span>" + this.key + "</span></div>"
          }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                showInLegend: false,
                dataLabels: {
                    enabled: false
                },
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer',
                y: 56.33
            }, {
                name: ' Chrome  Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome',
                y: 24.03,
                sliced: true,
                selected: true
            }, {
                name: 'Firefox',
                y: 10.38
            }, {
                name: 'Safari',
                y: 4.77
            }, {
                name: 'Opera',
                y: 0.91
            }, {
                name: 'Proprietary or Undetectable',
                y: 0.2
            }]
        }]
    });
});

.tooltip-key {
  width: 300px;
  word-break: break-word;
  white-space: normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharttable.org/master/jquery.highchartTable-min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

来源：http://www.highcharts.com/docs/chart-concepts/tooltip#formatter

【讨论】：