javascript - Making a scrollable tooltip in d3 pie chart -

i using d3pie d3.js. when hover on pie see tooltip data rest of data cut off/ hidden because data way long.

i want show scrollable list of gateways when clicked on pie tooltip.

here code.

var pie = new d3pie("gateway-datasources-status-chart", {         size: {             canvasheight: 300,             canvaswidth: 300         },         data: {             content: [                 { label: "online", value: online_gateway, lists: online_gateway_datasources },                 { label: "offline", value: offline_gateway, lists: offline_gateway_datasources }             ]         },         "tooltips": {             "enabled": true,             "type": "placeholder",             "string": "{label}: {lists}",             "styles": {                 "backgroundcolor": "#040404",                 "borderradius": 5             }         },         callbacks: {         }     }); 

i recommend creating div svg doesn't allow scroll. here example : http://bl.ocks.org/d3noob/a22c42db65eb00d4e369

basically add div :

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

then on mouseover, move div mouse , change div's text :

 .on("mouseover", function(d) {                  div.transition()                         .duration(200)      //so fades in                 .style("opacity", .9);                   div .html(formattime(d.date) + "<br/>"  + d.close)                   .style("left", (d3.event.pagex) + "px")                      .style("top", (d3.event.pagey - 28) + "px");                 })                           .on("mouseout", function(d) {                    div.transition()                         .duration(500)      //so fades out                 .style("opacity", 0);            });      

to on click :

piechart.on("click",function(d){ //show tooltip })