The tooltip in a scrollable container of Highcharts moves along with the content as it scrolls

I am currently facing an issue with my Highcharts instance that is displayed within a scrollable container. In addition, I have set the tooltip.outside option to true so that the tooltip always appears on top even if it exceeds the chart svg.

The problem arises when scrolling, as the tooltip moves along with the scroll which causes it to render in different positions when hovering over the series.

Is there a solution to this issue? It seems that setting tooltip.outside to false resolves the problem, suggesting that the calculations for tooltip positioning are affected by the scrolling when set to true.

To summarize, there are two main issues:

  1. The tooltip follows the scrolling movement
  2. Upon re-hovering, the tooltip position on the series becomes incorrect

You can view a gif demonstrating the issue here: Check out an example here: https://jsfiddle.net/tcqeo415/2/

If you disable the CSS code in the provided example, you will see the correct behavior of the tooltip

javascripthighcharts

Answer №1

This response bears resemblance to @ppotaczek's, but offers a distinct approach.

Upon entering a chart with the mouse, the position of the chart is cached. Even if you scroll while keeping the mouse within the chart, the position does not update due to caching.

To address this, utilizing tooltip.positioner and deactivating the caching by setting chartsPosition to null can be effective.

 positioner: function (w, h, point) {
    this.chart.pointer.chartPosition = null;
    return this.getPosition(w, h, point);
  },

This prompts the chart to recalculate its position. It should be noted that this may impact performance.

If you wish to maintain scrolling behavior, refer to @ppotaczeck's solution. The code snippet below removes any tooltips upon scrolling (specifically for the initial example).

document.body.addEventListener("scroll", function() {
  Highcharts.charts[0].tooltip.hide(0);
}, true)

Example: https://jsfiddle.net/gv1m6tjy/

Answer №2

The position of a chart remains static because it does not respond to the scrolling event.

To resolve this issue, you can update chart.pointer.chartPosition.top. The code snippet below is specific to the initial chart:

(function (H) {
  H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, points) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    this.points = points;
  });
}(Highcharts));

document.getElementById('container1').addEventListener('mouseenter', function(){
  var chart = Highcharts.charts[0];
  if (chart && chart.pointer && !chart.startChartPosY) {
    chart.pointer.getChartPosition();
    chart.startChartPosY = chart.pointer.chartPosition.top;
  }
});

document.getElementById('outer').addEventListener('scroll', function(e){
  var H = Highcharts,
    chart = H.charts[H.hoverChartIndex],
    tooltip = chart.tooltip;

  if (chart && chart.pointer) {
    chart.pointer.chartPosition.top = chart.startChartPosY - this.scrollTop;
  }

  if (tooltip && !tooltip.isHidden) {
    tooltip.refresh(tooltip.points);
  }
});

See the live demonstration here: https://jsfiddle.net/BlackLabel/ao0c21g6/3/

For more information, refer to the documentation:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Uploading files in AngularJS using Rails Paperclip

I have been working on implementing a file upload feature with AngularJS/Rails using the Paperclip gem. I was able to resolve the file input issue with a directive, but now I am facing an issue where the image data is not being sent along with other post d ...

javascriptruby-on-railsangularjsfile-uploadpaperclip

(RESPOND) Configuring a preset option for a Dropdown selection field

I am currently developing a frontend to demonstrate the behavior of a CRUD RESTful API. One specific requirement is that when the user selects the option "GET", the default value in the dropdown field labeled "Order-by" should be set to "Name". However, fo ...

javascriptreactjsdrop-down-menu

Switch between two tabs with the convenient toggle button

I have implemented 2 tabs using Bootstrap as shown below: <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">CLient</a></li> <li role="presentatio ...

javascriptjquerytwitter-bootstrap

Altering the color of a Fabulous Icon in real-time

I'm having trouble changing the color of an Awesome Icon with this code I created. Instead of getting the desired color, I am getting 'undefined' as a result. <script type="text/javascript"> function changeAIColor(idName) { alert ...

javascriptjqueryhtmlthymeleaffont-awesome

Angular2's change detection mechanism does not behave as anticipated after receiving a message from a Worker

Within my angular2 application, I encountered a rather intriguing scenario which I will simplify here. This is AppComponnet export class AppComponent { tabs: any = []; viewModes = [ { label: "List View"}, { label: "Tree View" }, ...

javascriptangularangular2-changedetection

Does the require function in nodejs have any connection to the package.json file?

If 'random_module' is included in the list of dependencies in my package.json file, can I use the code var rm = require("random_module"); to access it? Essentially, does the argument for require function apply to any module listed under the depen ...

javascriptnode.jsnpm

Issue with setting background image height to 100% or 100vh

Seeking help to address the issue of the URL field impacting the total height. Any assistance would be greatly appreciated. body,html { height:100% } Issue arises when there is a display in the address bar. .bg { min-height:100% background-size: cover; ...

javascriptcssvue.js

Displaying JavaScript - Nothing to Echo in PHP

Using PHP to echo a JavaScript block, I have encountered an error message. echo "<script language='javascript' type='text/javascript'> jQuery(document).ready(function($){ var $lg = $('#mydiv'); ...

javascriptphpjquery

Table header containing the weekdays for a jQuery calendar display

I need some assistance in creating a basic monthly calendar using a table. Check out this demo: www.jsfiddle.net/pzdw0s2n/1/ ...

javascriptjqueryhtmlcalendar

Expand Menu Options (jQuery)

Currently facing a jQuery problem that I can't seem to figure out. I've set up a menu with submenu elements and want to toggle the content height by clicking on menu items. The issue arises when clicking on another item causes the content to coll ...

javascriptjqueryhtmlshopify

typescript error is not defined

While browsing online, I came across a post discussing how to transfer data from an MVC model to a .ts file. The suggestion was to include the following code: <script type="text/javascript"> var testUrl = @Html.Raw(Json.Encode(Model.testUrl) ...

javascripttypescriptmodel-view-controllerundefined

Tips for implementing two functions to run within the onClick event handler in React

I am looking to simultaneously execute two functions handleClose and saveData within the onClick method. The specific location where I want this execution to happen: <Button variant="contained" onClick={saveData}&g ...

javascriptreactjsfunctiononclick

Create a JavaScript function that adds cells to a table, each containing an input field and a corresponding

I successfully developed a function that appends a table with rows and cells, then fills those cells with data from an array. However, I am now faced with the challenge of modifying it so that the generated cells contain an input field where the value= att ...

javascriptjqueryhtml-tableappend

Utilize styled-components in next.js to import and resize .svg files seamlessly

I have been attempting to import .svg files into my next.js project, but I have not had any success. I tried importing the .svg files the same way as in my React project by creating a typing.d.ts file and importing the svg as a component. However, it did ...

javascriptreactjssvgnext.jsstyled-components

Angular component injected with stub service is returning incorrect value

While attempting to write tests for my Angular component that utilizes a service, I encountered an issue. Despite initializing my userServiceStub property isLoggedIn with true, the UserService property appears false when running the tests. I experimented ...

javascriptangularjasmine

Clone all documents from a NodeJS mongoose collection and transfer them to a different server's database

I need assistance with migrating my database to a new server. My collection consists of approximately 410,000 documents, and I am looking to transfer them in batches of 100 to my new server that runs on mongodb. Below is the code I have written for this ...

javascriptnode.jsdatabasemongoose

Blunder! Error code EINVALIDTAGNAME encountered while trying to install a package

I'm encountering an issue while trying to add a new package to my React application. The error I'm receiving is: $ npm install xlsx npm ERR! code EINVALIDTAGNAME npm ERR! Invalid tag name "react-scripts start": Tags may not have any characters th ...

javascriptreactjsnpmnpm-install

Assign a unique ID to each Angular Material checkbox

Presently, I am facing an issue: I am required to generate md-checkboxes from a Database. The implementation is successful using ng-repeat. However, I am encountering difficulties in fetching the data from these checkboxes. Each entry in the Database has ...

javascriptangularjsnode.jscheckboxpug

It seems that BeautifulSoup and Selenium are unable to locate the div or text elements on the website

I have been attempting to utilize BeautifulSoup or Selenium in order to retrieve the Head to Head text or its corresponding div element on betexplorer (link provided below), but my efforts have unfortunately proved to be unsuccessful. Despite being able to ...

javascriptpythonseleniumbeautifulsoup

Tips for removing the current item from a list by clicking on a close icon of the same class name

Is there a way to remove a list item after clicking on its close icon? I am using a JavaScript function to add items to the list. Please refer to the image and code below. Thank you! https://i.stack.imgur.com/aeASd.png The code snippet is as follows: f ...

javascriptjquery