By default my SVG vis displays a tooltip but we want to create our own tooltip.
Is there a way to disable it?
Right now when I mouse over my tooltip box is displayed and it takes second for the default one to show.
Thanks
It’s unclear from your question how you created your SVG. Please share more details.
Hi, Mootari,
This is the code to create my SVG object and add my own tooltip. I have no idea how to control/access the default tooltip.
Regards,
const shape = d3.symbol().size( 120 ).type( d3.symbolDiamond );
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
//svg.append("g")
svg.select( ".lactno" )
.selectAll( "path" )
.attr("stroke-width", 1.5)
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.data(data.rows)//, ( row: any ) => row.key )
.join("path")
.attr( "transform", d => `translate(${xScale(new Date(d.caption(XPOS)))},${yScale(d.value(TMI))})` )
.attr("fill", d => lact_color(d.caption(LACTNO)))
.attr( "d", shape )
.on("mouseover", function(d) {
tooltip.transition()
.duration(0)
tooltip.style("visibility", "inline")
.style("opacity", .9);
tooltip.html("Animal ID: " +d.caption(CAT) +"<br>"+
"Calving Date: " +d.caption(XPOS) +"<br>"+
"TMI: " +d.caption(TMI) +"<br>"+
"Lactation No: " +d.caption(LACTNO) +"<br>"+
"Visible ID: " +d.caption(VISIBLEID) +"<br>"+
"Breed Code: " +d.caption(BREEDCODE) +"<br>"+
"SSC: " +d.caption(SSC) +"<br>"+
"PRO: " +d.caption(PRO) +"<br>"+
"Displayed TMI: " +d.caption(DISPLAYEDTMI) )
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.style("visibility", "hidden")
/* tooltip.transition()
.duration(500)
tooltip.style(“visibility”, “hidden”)
.style(“opacity”, 0);
tooltip.html(“mouse out”)
.style(“left”, (d3.event.pageX + 5) + “px”)
.style(“top”, (d3.event.pageY - 28) + “px”);*/
console.log(“Mouse out”);
});
SVG does not have a default tooltip, and neither does D3.
The message in the upper right of your screenshot suggests that you are using a commercial product or platform. If that’s the case, please consider contacting their support or asking in their forums.