Highcharts 工具提示在内容更改时自动调整大小

Question

我有一个带有工具提示的 Highcharts 图表，悬停时会显示加载微调器并通过 AJAX 从服务器获取一些数据以显示。当请求完成时，使用 jQuery 将数据放入工具提示中的 span，但新内容会溢出，因为工具提示不会调整大小。这是我的 SCSS:

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

是否有设置或 API 功能可用于让工具提示在其内容更改时自动调整大小或强制重绘？或者，是否有一些 CSS 我可以用来完成这项工作？

N.B。我可以通过设置上面span的height/width来手动设置tooltip的大小。

Answer 1

我建议禁用默认工具提示并使用完全响应式/HTML div（使用媒体查询），这将是工具提示。

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/

Highcharts 工具提示在内容更改时自动调整大小

Highcharts tooltip auto-resize on content change

javascript

css

ajax

highcharts