Javascript Map Tooltip Alignment - javascript

I recently had a developer back out on my project at the 95% completion mark and have been trying to complete this project on my own. I am currently working on the tooltip placement on the map found on this page:
https://www.shiftins.com/homeowners-insurance-california/
You can see the source here:
https://www.shiftins.com/county/index.html
There are 2 issues I need help resolving.
The tooltip for the bar charts should be located at the mouse pointer; however, it is located way right of the charts
The tooltip for the map portion seems to disappear on the bottom right half of the counties when scaled down.
I have spent quite a few hours with the trial-and-error method trying multiple solutions but I can't seem to figure it out (especially since I am not a developer).

For the map tooltip to appear ,
instead of padding-left for bar char ,give left property;.
This is because ,now the bar chart is overlapping on map chart,If you keep a border you can see the overlapping clearly.
<div id="linechart" class="col-sm-3" style="width: 60%;padding-left:120px;">
change this line to
<div id="linechart" class="col-sm-3" style="width: 60%;left:125px;">
For the bar tool tip to appear,
Now d3.event.pageX gives the x coordinate value of mouse.To get the accurate x value,you need to minus the offsetLeft value
var x = d3.event.pageX + 5-document.getElementById("linechart").offsetLeft;

You need to position the left and top i.e. x and y axis of the tooltip on mouseover/hover event. Something like this:
Add this style to the tooltip div:
"left", (d3.event.pageX) + "px").style("top", (d3.event.pageY - 28) + "px"
Here is a working example

Related

D3 tooltip not following the mouse

I have created a webpage with multiple charts using D3 and Object Oriented Programming.
Working code link--> https://codepen.io/mohan-ys/pen/LYLwqrK
The problem I am facing is that the tooltip is not at the mouse location, it is somewhere else.
I tried using d3.event.pageX & d3.event.pageY instead of vis.mouse[0] & vis.mouse[1] which is in the code above but it does not work.
I am getting the tooltip as shown. When the mouse is at the right end of the graph, the tool tip moves further right, it gets closer somewhere in the middle & it goes to the other side by the time the cursor is on the left end of the chart!
The page is resized, then it is a totally different behaviour!
Can anyone help get the tooltip right a the mouse pointer (top-left corner at the mouse pointer) for all graphs & even when the page is resized (the graphs scale with page resize).
The vertical line follows the mouse perfectly!, so, if there is another way of creating the tooltip instead of a div, that is also ok for me.
The underlying problem is addressed here but the answer doesn't directly solve your problem. Basically, there's a second and optional argument to d3.pointer called target such that:
If target is not specified, it defaults to the source event’s
currentTarget property, if available. If the target is an SVG element,
the event’s coordinates are transformed using the inverse of the
screen coordinate transformation matrix...
You can make use of this argument per below noting that it will break your vertical tracking line if you try and just update vis.mouse:
// mouse moving over canvas
vis.mouse = d3.pointer(event); // keep this for the vertical tracking line
vis.mouse2 = d3.pointer(event, d3.select(vis.chartLocation)); // <--- NEW VARIABLE!
Now vis.mouse2 has a relative x and y - so use them where you set the style of the div:
d3
.select(vis.chartLocation)
.selectAll("#tooltip")
.html((d, i) => {
vis.xDate = d.values[vis.idx - 1].date;
return vis.xDate.toLocaleDateString("pt-PT");
})
.style("display", "block")
.style("left", vis.mouse2[0] + "px") // use vis.mouse2
.style("top", vis.mouse2[1] + "px") // use vis.mouse2
The clue is in that your first selection is vis.chartLocation.

tooltips of a scaled jquery flot chart appear in wrong position

I'm using the flot library
How do I get the correct tooltips if I scale the chart with this css rule: transform: scale(0.7);
flot source uses the function findNearbyItem to find hovered items.
[FIDDLE] that demonstrates both cases - scale(1), and scale(.7)
taking your fiddle as source of the question, there is actually several problems to take care of:
the tooltip doesn't work correctly, if you hover over the tooltip, it disappears (starts flickering). Check the updated fiddle, which now hides the tooltip if you move away from the bar and stays if you hover over the tooltip itself.
scaling issue: just scale the canvas wrapper.
<div id="placeholder2" style="width:420px;height:210px;margin-top:40px;"></div>
scales the canvas to the same size like the css transform
<div id="placeholder2" style="transform:scale(.7)"></div>
but maintains the correct bar values and shows the tooltip in the correct position.

Interactive Guidelines of NVD3 Charts (Line chart) getting cut when in a 12 column grid (Bootstrap) i plot two charts

I have plotted a line chart using NVD3 and i am using bootstrap for responsive design. In a 12 column grid i am trying to plot two line charts. Everything works fine except for the line chart on left the interactive guidelines are getting cut. Here is the html code
<div class="col-md-12 instance-chart-template">
<div class="col-md-6 widget-chart with-sidebar">
<div id="%%instance-name%%-line-chart1-nvd3" style="height: 260px;"><span class="spinner"></span></div>
</div>
<div class="col-md-6 widget-chart with-sidebar">
<div id="%%instance-name%%-line-chart2-nvd3" style="height: 260px;"><span class="spinner"></span></div>
</div>
</div>
I am using Interactive Guidelines when plotting the chart. Here is the Javascript
var chart = nv.models.lineChart()
.margin({ right: 100 })
.useInteractiveGuideline(true)
What can i do to solve this issue. Is there any way that i can define the chart area so that the tooltip floats in that area only and doesnot get cut off or any other solution would be appreciated. Let me know in comments if any more details are required. I tried to be as descriptive as possible.
I had a similar issue with min/max X axis values getting cut off, and the only work-around I found to prevent it was to set some padding in the element which contains the SVG element, then set the following CSS for the SVG element itself:
svg.nvd3-svg
overflow: visible;
That way the svg content doesn't get cut off, just overflows into the padding on the container, which is not ideal, but in my case was enough.
Hope that helps

Chartjs extended doughnut with text tooltip issue

I am trying to build an extended doughnut in chartjs. I want to display the highest value as percent and its label in the middle. It works fine on load but breaks after an hover event. One a tooltip is being displayed something breaks the first draw event and move the text on the left and i can't figure how to solve this. I made a fiddle to describe this issue :
http://fiddle.jshell.net/3be5zb0v/
Any ideas on how to fix this ?
Working fiddle - http://fiddle.jshell.net/3be5zb0v/1/
Just add this before your fillText
thechart.textAlign = 'start';

How to show tooltip next to the mouse cursor on SVG, despite Non-SVG elements on the website?

Aim:
I have a website with some content and svg scheme in the middle of it. When one points to the elements of the scheme, tooltips should appear next to the mouse cursor.
Problems: Based on examples like this (which was shown by Julian Berger in How to get the position of SVG element), I made working SVG. Unfortunately it is working only as long as the SVG scheme is not included into the website. Content other then SVG make evt.clientX and Y coordinates system to fail --> the tooltip starts to appear in some distance from the cursor (it seems that the more of other then SVG content I have, the further tooltip is moved away from cursor). The simple example is shown here, simply by adding couple of <br/> before the actual SVG begins.
And my question:
Do you have some ideas how to fix the position of the tooltip, so that it would appear always next to the moving cursor?
All the best,
Wojtek
All you have to do is alter mousemove handler a little. It should position the tooltip relative to the top left of the SVG, rather than the page. You do that by subtracting the position of the SVG, which we get by surrounding the SVG with a <div> element and accessing its offsetLeft and offsetTop properties.
<div id="mysvg">
<svg>...</svg>
</div>
function ShowTooltip(evt, mouseovertext) {
svg = document.getElementById("mysvg");
tooltip.setAttributeNS(null,"x",evt.clientX+11 - svg.offsetLeft);
tooltip.setAttributeNS(null,"y",evt.clientY+27 - svg.offsetTop);
...
}
Full demo here

Categories