Моя подсказка CSS на заголовке highcharts не работает - PullRequest
Новая
       37

Моя подсказка CSS на заголовке highcharts не работает

0 голосов
/ 17 июня 2019

У меня есть некоторая кодировка о старших чартах, и я использую настраиваемую подсказку для своего заголовка, его работы, но у меня проблема с z-index

Это мой код: enter image description here

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);
 }

Это моя работа:

enter image description here

1 Ответ

1 голос
/ 19 июня 2019

Для отображения всплывающей подсказки вне графика измените значение по умолчанию overflow Стиль CSS: 

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

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

Демо: http://jsfiddle.net/BlackLabel/7m6z5upw/

Чтобы перенести текст на следующую строку, установите white-space: normal style: 

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

Демонстрационная версия: http://jsfiddle.net/BlackLabel/38roauzj/

...