Question

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

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

我尝试覆盖 .highcharts-tooltip css，但无效。参见示例，将鼠标悬停在蓝色＆amp;黑色切片你会知道我面临的问题。

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

}

这是JsFiddle

任何帮助都是赞赏的。

提前致谢

Answer 1

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

tooltip: {
  useHTML: true
}

来自Higcharts文档：

useHTML ：BooleanSince 2.2

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

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

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

工作Fiddle

Answer 2

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

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

查看fiddle或运行下面的代码段

$(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

HighChart Tooltip分词问题

2 个答案: