Переполнение всплывающей подсказки Highcharts скрыто

Моя проблема в том, что когда область рисования диаграммы меньше, чем всплывающая подсказка, часть всплывающей подсказки скрыта там, где она переполняет область рисования диаграммы.

Я хочу, чтобы всплывающая подсказка была видимой все время, независимо от размера области рисования диаграммы.

Никакая настройка CSS не помогла, и более высокий параметр z-index не помог.

Вот мой пример... http://twitpic.com/9omgg5

Любая помощь будет в основном оценена.

Спасибо.

Ответ 1

ОК, извините за задержку. Я не мог найти лучшего решения, но нашел способ обхода.

Вот что я сделал и что я предлагаю всем попробовать:

Установите для свойства tooltip.useHTML значение true (теперь вы можете иметь больше контроля с html и CSS). Вот так:

tooltip: {
    useHTML: true    
}

Отменить все параметры всплывающей подсказки по умолчанию, которые могут иметь какое-то отношение к функциям всплывающей подсказки по умолчанию. Вот что я сделал...

tooltip: {                        
    shared: false,
    borderRadius: 0,
    borderWidth: 0,
    shadow: false,
    enabled: true,
    backgroundColor: 'none'
}

Убедитесь, что свойство "переполнение" контейнера в контейнере контейнера установлено на видимое. Также убедитесь, что все элементы DOM (div, section и т.д.), которые содержат ваш контейнер диаграмм, также свойство css "overflow" установлено в "visible". Таким образом, вы убедитесь, что ваша всплывающая подсказка будет всегда видимой, поскольку она переполняет его родителя и других его "предков" (это правильный термин?:)).

Настройте форматирование всплывающей подсказки по своему усмотрению, используя стандартный стиль CSS. Вот что я сделал:

tooltip.formatter: {
    < div class ="tooltipContainer"> Tooltip content here < /div >
}

Вот как все выглядит так:

tooltip: {                        
    tooltip.formatter: {
        < div class ="tooltipContainer"> Tooltip content here < /div >
    },
    useHTML: true,
    shared: false,
    borderRadius: 0,
    borderWidth: 0,
    shadow: false,
    enabled: true,
    backgroundColor: 'none'
}

Если у вас есть лучшее решение, отправьте сообщение.

Ответ 2

Этот css помог мне:

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

Ответ 3

Добавление просто этого CSS работало в моем случае (миниатюры в ячейках таблицы):

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

Опция tooltip useHtml не требуется:

tooltip: {
    useHTML: false
}

Работает как с IE8/9, так и с FF33.1 (FF вызывает проблемы).

Ответ 4

Недавно я получил ту же проблему, но с контейнером для загрузки! (BS3)

Ни одно из этих решений не работало, но я нашел сам.

Из-за свойств загрузки _normalizer

svg:not(:root) {
  overflow: hidden !important;
}

Итак, добавьте оба:

.highcharts-container, svg:not(:root) {
    overflow: visible !important;
}

Ответ 5

Я знаю, что вопрос старый, но я просто хотел поделиться своим решением, оно основано на двух других ответах, но я думаю, что вы получите более красивый результат с помощью этого кода:

Параметры подсказки:

tooltip: {
   useHTML: true,
   shared: false,
   borderRadius: 0,
   borderWidth: 0,
   shadow: false,
   enabled: true,
   backgroundColor: 'none',
   formatter: function() {
      return '<span style="border-color:'+this.point.color+'">' + this.point.name + '</span>';
   }
}

CSS

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

.highcharts-tooltip span>span {
    background-color:rgba(255,255,255,0.85);
    border:1px solid;
    padding: 2px 10px;
    border-radius: 2px;
}

#divContainerId .highcharts-container{
    z-index: 10 !important; /*If you have problems with the label hiding behind some other div or chart play with z-index*/
}