CODEWITHSUNDEEP
htmlhighchartsappendtooltip
vegaelce
vegaelce

Reputation: 145

Highcharts add external tooltip into specific div

I used a fullscreen function on a sparkline highchart container. The similar and shorten result is visible here : https://jsfiddle.net/vegaelce/avyrs5od/

The fullscreen is working well but on fullscreen mode the tooltips are not displayed because of the tooltip.outside parameter (which is mandatory in my case) :

    tooltip: {
        outside: true
    },

In this case, the divs for the tooltip (class highcharts-tooltip-container) are automatically created under "body" whereas I need they are created under "container" div (because it is the container div that is fullscreened).

Is it possible to assign a specific div for an outside tooltip ?

Thanks in advance

Upvotes: 0

Views: 787

Answers (2)

user2665536
user2665536

Reputation: 11

For custom tooltips, you can fix the issue with tooltip position changing when the main window is scrolled by adding window.scrollY in the positioner function.

var panelY = this.chart.plotHeight + this.chart.container.getBoundingClientRect().top + window.scrollY;

Upvotes: 1

madepiet
madepiet

Reputation: 884

fullscreen takes the container and stretches the entire screen, and the tooltip when outside: true adds a new div with a new SVG to the end of the body - so it cannot be seen in fullscreen mode. The solution may be to find in the code where it is thrown to the end of the body and move it somewhere to the div where the fullscreen is made. A small wrap should be fine for this - the location of this div with tooltip outside: ture shouldn't matter for its proper display: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

    (function(H){

H.wrap(H.Tooltip.prototype, 'getLabel', function (proceed) {
    // proceed
    var result = proceed.apply(this, [].slice.call(arguments, 1));
        
        if (
            (this.container || {}).parentElement === H.doc.body
        ) {
            // move to the top container for spark-line
            H.doc.getElementById('container').appendChild(this.container);
        }
        
        return result;
});

}(Highcharts));

Demo: https://jsfiddle.net/BlackLabel/kwz0dme5/

Upvotes: 2

Related Questions