css - 我在 highcharts 标题上的 css 工具提示不起作用

Question

我有一些关于 highcharts 的代码，我在我的标题上使用自定义工具提示，它的工作，但我对 z-index

有问题

这是我的代码:

title: {
  style: {
    fontSize: '12px',
    fontFamily: 'Open Sans',
    color: '#4E4D4D'
  },
  align: 'left',
  useHTML: true,
  text: '<b class="font-open-sans-semibold">AGE DISTRIBUTION</b> &nbsp; <i class="icon icon-tooltip tooltips" glose="{{$tooltip_age['information']}}"></i>'
},

这是我的CSS:

.tooltips {
  display: inline;
  position: relative;
}

.tooltips:hover:after {
   content: attr(glose);
   background-color: black;
   color: #fff;
   text-align: center;
   padding: 5px 0;
   position: absolute;
   z-index: 9999 !important;
   background: rgb(255, 255, 255);
   border-radius: 3px;

   font-family: "Open Sans";
   font-weight: 600;
   font-style: normal;
   font-size: 10px;
   line-height: 25px;
   padding: 10px;

   color: rgb(78, 77, 77);
   top: 150%;
   left: 50%;
   margin-left: -60px;
   text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px;
   -webkit-box-shadow: 0px 0px 5px 1px rgba(197,197,197,0.56);
   -moz-box-shadow: 0px 0px 5px 1px rgba(197,197,197,0.56);
   box-shadow: 0px 0px 5px 1px rgba(197,197,197,0.56);
 }

这是我的作品:

Answer 1

要在图表外显示工具提示，请更改默认的 overflow CSS 样式:

#container {
    width: 300px;
    overflow: visible !important;
}

.highcharts-container  {
    overflow: visible !important;
}

现场演示: http://jsfiddle.net/BlackLabel/7m6z5upw/

要将文本换行到下一行，请设置 white-space: normal 样式:

.tooltips:hover::after {
    content: '...';
    white-space: normal;
    width: 200px;
    ...
}

现场演示: http://jsfiddle.net/BlackLabel/38roauzj/