2015-04-23 8 views
0

У меня есть диаграмма Highcharts с всплывающими подсказками, которые на дисплее отображают загрузчик и извлекают через AJAX некоторые данные с сервера для отображения. Когда запрос завершается, данные вводятся в span в всплывающей подсказке с использованием jQuery, но новое содержимое переполняется, так как всплывающая подсказка не изменяет размер. Вот мой SCSS:Highcharts tooltip auto-resize при изменении содержимого

.highcharts-tooltip { 
    width: auto !important; 
    height: auto !important; 
    span { 
     width: auto !important; 
     height: auto !important; 
    } 
} 

Есть ли функция установки или API можно использовать либо уже подсказке автоматически изменяет размер, когда его изменения содержимого или заставить перерисовку? В качестве альтернативы, есть ли какой-нибудь CSS, который я могу использовать для выполнения этой работы?

N.B. Я могу установить размер всплывающей подсказки вручную, установив высоту/ширину span выше.

+0

Каких вариант подсказки у вас есть в вашем определении графика? –

+0

'useHtml: true' и' followPointer: true'. Formatter возвращает строку и загрузчик и запускает AJAX. –

ответ

1

Я предлагаю отключить всплывающую подсказку по умолчанию и использовать полный отзыв/HTML div (использовать медиа-запросы), который будет toolp.

plotOptions: { 
     series: { 
      point: { 
       events: { 
        mouseOver: function (e) { 
         $('#tooltip').html('Point value: ' + this.y).css({ 
          top: e.target.plotY - 15, 
          left: e.target.plotX 
         }).show(); 

        }, 
        mouseOut: function (e) { 
         $('#tooltip').hide(); 
        } 
       } 
      } 
     } 
    }, 

Пример: http://jsfiddle.net/gL7j6bzq/2/

Смежные вопросы