I am in a pickle here as I can’t get the last 2 tests to pass simultaneously.
I have a tooltip defined (using the d3-tip library)
var tip = d3
.tip()
.attr("id", "tooltip")
.style("background-color", "lavender")
.html(
d =>
d.Name +
" " +
"[" +
d.Nationality +
"]" +
"<br/>" +
"Time: " +
d.Time +
", Year: " +
d.Year +
"<br/>" +
"Doping allegation: " +
(d.Doping !== "" ? d.Doping : "none")
);
whenever I have code like this:
.call(tip)
.on("mouseover", function(d){
tip.attr('data-year', d['Year'])
tip.show
})
.on("mouseout", tip.hide)
I pass the test 15. The tooltip no longer shows so I don’t pass test 14
But when I have code like this
.call(tip)
.on("mouseover",tip.show)
.on("mouseout", tip.hide)
Here I am no longer passing the attribute to tooltip but the tooltip shows so I don’t pass test#15. I don’t know how exactly to fix it.
I tried passing the attribute in the definition of the tooltip itself but whenever I do all my dots go away. Does anyone have any experience with this or should I refactor and try and create custom tooltips using divs or something