When I hover over the data point it keeps the information for that data point locked in the left portion of the screen. How do I get it to be where the users mouse is? Here's what I have
var tooltip = d3.select("body")
.append("div")
.attr("id", "tooltip")
.attr("style", "position: absolute; opacity: 0;")
.style("border", "solid")
.style("border-width", "1px")
.style("border-radius", "5px")
.style("padding", "10px");````
...
.on("mouseover", function(d){
d3.select("#tooltip")
.transition()
.duration(200)
.style("opacity", .9)
.text("User: " + d.user + " " +
"Top Artist: " + " " + d.artist + " " +
"Top Song: " + d.track)
d3.select(this)
.transition()
.duration(100)
.attr("r", 23)
.attr("fill", "orange");
})
.on("mouseout", function(d) {
d3.select("#tooltip")
.style("opacity", 0)
d3.select(this)
.transition()
.duration(100)
.attr("r", 15)
.attr("fill", "black");
});
You can use d3.event.pageX and d3.event.pageY built into D3. When you're adding your tooltip, try this:
d3.select("#tooltip")
.transition()
.duration(200)
.style("opacity", .9)
.text("User: " + d.user + " " +
"Top Artist: " + " " + d.artist + " " +
"Top Song: " + d.track)
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 28 + "px");
You may need to adjust the top style based on the height of your tooltip.
Related
I trying to add a simple tooltip to my scatterplot, the thing is that it shows below the graph, I don't know if it is for the "div", but I've tried with svg and g and still won't show.
Is there any other way I can add my tooltip?
const tooltip = d3.select("#CraftBeer")
.append("div")
.style("opacity", 0)
.attr("class", "tooltip")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "1px")
.style("border-radius", "5px")
.style("padding", "10px")
const mouseover = function(d) {
tooltip
.style("opacity", 1)
}
const mousemove = function(d) {
tooltip
.html(d.beer + "<br/>" + "ABV:" + d.abv + "%" + "<br/>" + "IBU:" + d.ibu +"<br/>" + "SRM:" + d.srm)
.style("left", (d3.event.pageX+10)+"px") // It is important to put the +90: other wise the tooltip is exactly where the point is an it creates a weird effect
.style("top", (d3.event.pageY-10)+"px")
}
const mouseleave = function(d) {
tooltip
.transition()
.duration(300)
.style("opacity", 0)
}
plot = g.selectAll("bottle")
.data(data)
.enter()
.append("g")
.attr("transform", d => `translate(${xScale(d.abv)},${yScale(d.ibu)})`)
.style("fill", d => colors(d.srm))
.style("stroke", d => colors(d.srm))
.style("stroke-width", "13px")
plot.append("g")
.attr("transform", `scale(0.150) translate(-256,-256)`)
.selectAll()
.data(bottlePath)
.enter()
.append("path")
.attr("d", d => d)
plot.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
Try putting the style for your tooltip before the html like
const mousemove = function(d) {
tooltip
.style("left", (d3.event.pageX+10)+"px") // It is important to put the +90: other wise the tooltip is exactly where the point is an it creates a weird effect
.style("top", (d3.event.pageY-10)+"px")
.html(d.beer + "<br/>" + "ABV:" + d.abv + "%" + "<br/>" + "IBU:" + d.ibu +"<br/>" + "SRM:" + d.srm)
}
I'm wondering if its possible to define a CSS style for a tooltip function displayed by d3.js on mouse over event in the actual body of the definition rather than on top of the page in the style section.
JAVASCRIPT:
var tooltip = d3.select("#scatter-load").append("div")
.attr("class", "tooltip")
//.attr("position", "absolute")
//.attr("width", "200px")
//.attr("height", "30px")
//.attr("pointer-events", "none")
.style("opacity", 0);
chocolateGroup.append("circle")
.attr("r", function(d) {return rScale(d.size);})
.attr("opacity", 0.7)
.style("fill", "steelblue")
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", .9)
tooltip.html(d.manufacturer + "<br/> (" + xValue(d)
+ ", " + yValue(d) + ")")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
CSS:
.tooltip {
position: absolute;
width: 200px;
height: 28px;
pointer-events: none;
What I am looking for is something similar to this style where CSS styling is defined when object is created (for example fill):
svg.append("path")
.datum(data)
.attr("d", area)
.attr("fill", "steelblue");
You should be using style to set CSS style like this:
.attr("class", "tooltip")
.style("position", "absolute")
.style("width", "200px")
.style("height", "30px")
.style("pointer-events", "none")
.style("opacity", 0);
I have the following D3 code.
var tooltip= d3.select("body").append("div")
.style("position", "absolute").style("display", "none")
circ.on("mouseover", function(d){ //circ is a circle
tooltip.html(d.venue +"<br/>" + d.var2 + ", " + d.var3)
.style('left', (d3.event.pageX - 30 ) + 'px') // Showing the d.count
.style('top', (d3.event.pageY - 30 + 'px')
.style("font-size","10px")
.style("padding", "5px")
.style("display", "block")
.style("background", "White")
.style("color","black") //font color
I want to bold the venue(d.venue) only and need to get in one line and the remaining two variables in the next line of the comment box without bold.
This should work
tooltip.html("<b>" + d.venue +"</b><br/>" + d.var2 + ", " + d.var3)
At the moment the overlay div is always showing up. But I only want it to show up when the mouse is passing a value in the chart. The method d3.event.pageX and d3.event.pageY will not work. The code is just a snippet of a greater page and somehow the positions of the mouse are not tracked when using the d3 methods.
Here is a fiddle of the code: http://jsfiddle.net/9z6nmwff/
Here is a snippet of the code:
//draw the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.open); })
// Tooltip stuff after this
.on("mouseover", function(d) {
//console.log("x: " + d.pageX + ", y: " + d3.event.pageY);
$(document).mousemove(function(event){
console.log("x: " + event.pageX + ", y: " + event.pageY);
div.transition()
.duration(200)
.style("opacity", 0);
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTime(d.date) + "<BR>" +d.open)
.style("left", (event.pageX) + "px")
.style("top", (event.pageY ) + "px");
//$("span").text("X: " + event.pageX + ", Y: " + event.pageY);
});
});
How can I do this?
Edit:
Here is the code for my current solution. Thank you for your help!
// Tooltip stuff after this
.on("mouseover", function (d) {
$(document).ready(function(){
$(".clearfix").mousemove(function(event){
div.transition()
.duration(200)
.style("opacity", 0);
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTime(d.date) + "<BR>" + d.open)
.style("left", (event.pageX+3) + "px")
.style("top", (event.pageY+3) + "px");
});
$(".clearfix").mouseleave(function(){
div.transition()
.duration(200)
.style("opacity", 0);
});
});
});
you can use the mouseleave to do the hiding and let the mouseenter do the showing similar to you are doing now
// Tooltip stuff after this
.on("mouseover", function (d) {
div.transition()
.duration(200)
.style("opacity", 0);
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTime(d.date) + "<BR>" + d.open)
.style("left", (event.pageX) + "px")
.style("top", (event.pageY) + "px");
}).on("mouseleave", function (d) {
div.transition()
.duration(200)
.style("opacity", 0);
});
fiddle http://fiddle.jshell.net/leighking2/277yknrs/
I have 7 declared divs with different class attributes using jquery. I would like to use the 7 divs in mouseover. How would I do this?
My 7 divs are divOne, divTwo ... until divSeven.
I have this sample mouseover code but only one div is used.
nodeEnter.append("circle")
.attr("r", 30)
.style("stroke","white")
.on("mouseover", function(d) {
divOne.transition()
.duration(200)
.style("opacity", .9);
divOne.html(
"Name" + "<br />" + "Address"
)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
divOne.transition()
.duration(500)
.style("opacity", 0);
});
How to add the other divs during mouseover? Any help. Thanks
You need to have something like this.
nodeEnter.append("circle")
.attr("r", 30)
.style("stroke", "white")
.on("mouseover", function(d) {
onMouseOver();
})
.on("mouseout", function(d) {
onMouseOut();
});
var divElements = $('.classofdiv1', '.classofdiv2'......); //add all the div's class
function onMouseOver() {
$(divElements).each(function(index) {
$(this).transition()
.duration(200)
.style("opacity", .9);
$(this).html(
"Name" + "<br />" + "Address"
)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
});
}
function onMouseOut() {
$(divElements).each(function(index) {
$(this).transition()
.duration(500)
.style("opacity", 0);
});
}
Hope this helps :)