Combining D3.js tooltip positioning with CSS overflow styling

I am encountering an issue with displaying tooltips in D3 when combined with CSS overflow. Is there a solution available for this particular problem?

CSS code:

#chart1 {
    overflow-x: auto;
    overflow-y: hidden;
   max-width: 800px;
   max-height: 225px;
   position: absolute;
   left: 140px;
   top: 10px;
}

D3 code:

.on("mouseover", function(d) {
                    tooltip.transition()
                        .duration(400)
                        .style("opacity", 0);
                    tooltip.transition()
                        .duration(100) 
                        .style("visibility", "visible") 
                        .style("opacity", .8);
                    tooltip.html(d.visitCountry + "<br/> " + tooltipDate(d.startDate) + " - " + tooltipDate(d.endDate) + "<br/> " + d.visitPurpose)
                        .style("left", (d3.event.pageX - 15) + 'px') // possible issue here?
                        .style("top",  (d3.event.pageY - 10) + 'px'); // possible issue here?
                }) 
                .on("mousemove", function(d) {
                    return tooltip.style("top", (d3.event.pageY - 10)+"px").style("left",(d3.event.pageX - 110)+"px");
                })
                .on("mouseout", function(d) {
                    tooltip.transition()
                    .duration(0)
                    .style("visibility", "hidden");
                });

When the page hasn't been scrolled, the tooltip functions correctly. However, the positioning of the tooltip is affected otherwise.

Fiddle: http://jsfiddle.net/00fhtuyg/1/

cssd3.js

Answer №1

When working with the chart, it is important to consider the overflow-x property. Utilize the scrollLeft attribute of the chart1 element to accurately position the tooltip:

d3.event.pageX + document.getElementById("chart1").scrollLeft

Additionally, I recommend using the offsetTop and offsetLeft values instead of hard-coding the absolute offset for the chart div. This method allows you to adjust the div's position without needing to modify the corresponding JavaScript code.

d3.event.pageX + document.getElementById("chart1").scrollLeft - document.getElementById("chart1").offsetLeft

To summarize, your code would look like this:

.on("mousemove", function(d) {
    return tooltip.style("top", (d3.event.pageY - document.getElementById("chart1").offsetTop + 15)+"px").style("left",(d3.event.pageX-document.getElementById("chart1").offsetLeft + document.getElementById("chart1").scrollLeft + 10)+"px");
})

Answer №2

Have you attempted utilizing d3.tip.js before? It's a simple tool for creating tooltips:

See Example Here

API: Learn More Here

How to change the tooltip direction programmatically

tip.direction(function(d) {
  if(d == 'california') return 'w'
  if(d == 'new york') return 'e'
})

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

"Changing background color, incorporating hover effects, utilizing !important, and manipulating .css properties with

Encountered a dilemma. I devised a "tabs" feature illustrated in the following demo: http://jsfiddle.net/4FLCe/ The original intention was for the tab to change color to A when hovered over, and to color B when clicked on. However, as shown in the demo, ...

javascriptjquerycss

Relocating to the middle of the webpage (Automatically resize for mobile compatibility if feasible)

Apologies for my poor English. Are there any suggestions on how to center this without using margins or other methods? Perhaps there are alternative solutions. https://i.sstatic.net/dXfwL.png Also, is it feasible for the image and video to automatically a ...

javascripthtmlcssvue.js

Alter the border hue of the checkbox and radio button

Is there a way to modify the border color of checkboxes and radio buttons (both circle and rectangle) using CSS? I've attempted several methods with no success. Can someone provide guidance on this? Any advice would be greatly appreciated. Thank you ...

htmlcss

Problems with navigation alignment in Flask website due to HTML, CSS, and

Here's a snapshot of my current website design: website I'm attempting to place the Login & Sign up buttons in line with the rest of the navigation bar. I've tried various methods without success so far. My attempts include adjusting text a ...

htmlcssflask

"Rearranging the Firefox ghost image by dragging and dropping it

My drag and drop game is working perfectly on all browsers except for Firefox. In Firefox, the ghost image that appears when an item is dragged seems to be positioned very far away from the cursor. Although the ghost image can still be seen on the page, it ...

javascripthtmlcssfirefox

Responsive Text in HTML Email Depending on Device

I currently have an email template that is functioning perfectly, but I am looking to take it to the next level. The top navigation of the email consists of 4 columns of text. To ensure that it appears well on both desktop and mobile devices, the font size ...

htmlcssmedia-querieshtml-emailemail-templates

Display a helpful tooltip when hovering over elements with the use of d3-tip.js

Is it possible to display a tooltip when hovering over existing SVG elements? In this example, the elements are created during data binding. However, in my case, the circles already exist in the DOM and I need to select them right after selectedElms.enter ...

javascripthtmld3.jssvg

Unable to remove the most recently added Object at the beginning

I am currently working on a project to create a dynamic to-do list. Each task is represented as an object that generates the necessary HTML code and adds itself to a div container. The variable listItemCode holds all the required HTML code for each list it ...

javascriptjqueryhtmlcss

Avoid repeating media queries in MUI JSS by combining them efficiently

Is there a more efficient way to apply the same set of CSS styles to multiple media query rules without repetition? Currently, the only workaround seems to be: [theme.breakpoints.up('xl')]: { color: 'red', backgroundColor: 'gre ...

cssreactjsmaterial-uijss

Stop text from overflowing when it reaches the maximum width in flexbox

A basic flexbox layout is displayed with an image next to text, aiming for this layout: #container { align-items: center; background: black; display: flex; justify-content: center; padding: 10px; width: 500px; /* Dynamic */ } #image { bac ...

htmlcssflexbox

Having trouble with CSS text not wrapping correctly?

While working on a web application, I encountered an issue where the text within a <div> element on my page was not wrapping properly and instead overflowing outside the box. The <div> in question goes through two stages: one where it is not e ...

cssoverflowwhitespace

What are some solutions for repairing unresponsive buttons on a webpage?

My task is to troubleshoot this webpage as the buttons are not functioning correctly. Here’s a snippet of the source code: <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> <div id="container" ...

javascripthtmlcssbarcode

What is the reason behind my resizer bar not changing color to green?

Whenever I resize the bar between the West and Inner Center areas, it turns green. However, the bar between the Inner Center and Inner South areas does not change color. How can I make it turn green when resizing, including adding the orange highlight for ...

javascriptjquerycssjquery-ui

Having trouble displaying SVG elements in Material UI

Currently, I am faced with an issue while trying to display a .svg file in the header of a drawer using Material-UI and create-react-app. Instead of the expected .svg image, all I see is a broken image rendering. Any assistance on resolving this problem ...

cssmaterial-uicreate-react-app

What is the best way to ensure that multiple bootstrap buttons in a row have the same width?

Could you help me figure out how to make the <div id="full"> element take up the full width of its parent container, while also ensuring that the 3 buttons inside share this width and have equal sizes with gaps between them? https://i.stac ...

htmlcssbootstrap-5

What is the method to ensure that flexbox takes into account padding when making calculations?

There are two sets of rows displayed below. The first row contains two items with a flex value of 1 and one item with a flex value of 2. The second row contains two items with a flex value of 1. As per the specification, 1A + 1B = 2A However, when ...

htmlcssflexbox

Arrange a stationary child in relation to the grandparent element

I created a small window within a browser window, containing an even smaller window with auto-scrolling text. However, I need some text in the smaller window to remain static and not scroll. Therefore, I used position_fixed which is absolutely related to ...

htmlcsspositioncss-position

Issues arise when implementing ReactJS transitions for progress bars

As a newcomer to the world of ReactJS, I have been exploring the FB documentations and online tutorials to kickstart my test project. Within this project, I wanted to implement a progress bar that visually represents the user's progression through fi ...

cssreactjs

If no other columns are present, ensure a column with a width of 9 fills the entire width

While working with Foundation 6, I encountered a situation where I had a large-3 column next to a large-9 column. The issue was that sometimes the large-3 column might not be present. In such cases, I wanted the remaining column to expand and fill up the ...

htmlcsszurb-foundationgrid-layout

Applying the document height to window height ratio to create a scale ranging from 1 to 100

My goal is to create a scroll bar using two divs with heights of 110px and 10px. The smaller one will be nested inside the taller one, allowing for adjustment of its margin-height from 0 to 100px while still fitting within the larger div. When I refer to ...

javascriptjquerycss