score:2

Accepted answer

This is relatively simple if you had your own tooltip code, as the example below shows. Having your own tooltip code gives you more flexibility and control. So, technically, this is not an answer to your question because it doesn't use "D3-Tip".

Click "run code snippet", and hover over the circle to show the tooltip. Clicking on button 1 generates an alert.

var svg = d3.select("body")
	.append("svg")
	.attr("width", 300)
	.attr("height", 300);
	
var tooltip = d3.select("body").append("div")	
	.attr("class", "tooltip")				
	.style("opacity", 0);

var circle = svg.append("circle")
	.attr("cx", 150)
	.attr("cy", 150)
	.attr("r", 100)
	.attr("fill", "steelblue");
	
circle.on("mouseover", function(){
	tooltip.html("<button id='but1'>Button 1</button><button  id='but2'>Button 2</button>")
	.style('top', d3.event.pageY - 10 + 'px')
	.style('left', d3.event.pageX + 10 + 'px')
	.style("opacity", 1);
	d3.select("#but1").on("click", function(){ alert("button 1 clicked")});
});
div.tooltip {	
    position: absolute;			
    text-align: left;			
	  white-space: normal;					
    padding: 4px;				
    font-size: 14px;		
    background: tan;	
    border: 1px solid gray;		
}
<script src="https://d3js.org/d3.v4.min.js"></script>


Related Query

More Query from same tag