HighChart工具提示word-break問題

我搜索了很多，但我沒有找到適合我的問題的解決方案。我使用HighChart插件來創建餅圖以及條形圖。HighChart工具提示word-break問題

我的問題是，徘徊在任何條形圖或餅圖默認提示後出現的，因爲我想用CSS屬性字斷 & 空白在提示。如果文字超出容器寬度，現在文本會被剪切。

我試圖覆蓋.highcharts-tooltip css，但不起作用。請參閱示例，將鼠標懸停在藍色&黑色部分，您將會了解我面臨的問題。

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

}

這裏是JsFiddle

任何幫助表示讚賞。

在此先感謝

來源

2016-04-15 Mahi Kalyanar

爲了能夠自定義工具提示這樣你就已經設置了提示選項useHtml爲true：

tooltip: { 
    useHTML: true 
}

從Higcharts文檔：

useHTML：BooleanSince 2.2

使用HTML呈現工具提示的內容而不是SVG。使用HTML 可以在工具提示中進行高級格式化，如表格和圖像。

然後，你需要設置CSS屬性的.highcharts-提示的跨度元（我還添加了一個固定的寬度）：

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

工作Fiddle

來源

2016-04-15 13:06:53 allu

只啓用了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: { 
 
     \t useHTML: true, 
 
      formatter: function() { 
 
      \t 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

來源

2016-04-15 13:04:27 Jorrex

HighChart工具提示word-break問題

回答

相關問題