D3 tooltip inside custom sparkline chart in an 'ag-grid' table cell not visible outside of table cell boundary

Question

I have an angular.js app with d3 and ag grid javascript grid libary ( https://www.ag-grid.com/ ) to generate a tooltip for providing point data on a waterfall chart inside the table.

When I hover to a lower poin on a particular chart I get a tooltip but is clipped if it extends beyond the table cell boundary.

Cell/Chart width height is 300px by 150px.

What I have tried (with partial success):

 <div tabindex="-1" unselectable="on" role="gridcell" comp-id="51" col-id="CloseTrends_1" 
 class="ag-cell ag-cell-not-inline-editing ag-cell-with-height ag-cell-value ag-cell-focus" 
 style="width:500px;left: 915px;">   

width 500px works to only eliminate horizontal clipping value for each cell modified but vertical portion clipping is still occuring when tooltip goes below the cell boundary on y axis.

What I want:

Each chart to have tooltips visible above and throughtout cell no matter of location of tooltip on cell chart.

overflow: visible on the svg element and the above modification partially helped but still is producing an incomplete solution

Open the fiddle and scroll table to right to see the charts. Hover with mouse to observe effect.

https://next.plnkr.co/edit/6m3EoZ2RN1bWMOiP?preview

Answer 1

You can create an html tooltip that appears based on its activated position. This should eliminate the issue of the tooltip getting cut off.

//function to append the tooltip; this is assuming only one tooltip will show at a time

appendTooltip() {
      var target = document.getElementById("app");

      var tooltip = d3.select(target).selectAll(".tool-tip");

      if (tooltip.empty()) {
        tooltip = d3.select(target).append("div")
          .attr("class", "tool-tip")
          .style("opacity", 0);
      }

      return tooltip
},

//function to show the tooltip
showTooltip(tooltip, d) {

      tooltip.transition()
        .duration(200)
        .style("opacity", 0.8);

      var html = `<div>date<div>${d.date}`

      tooltip.html(html);
      tooltip.style("left", (d3.event.pageX + 10) + "px)
      tooltip.style("top", d3.event.pageY + "px")
},

//function to remove the tooltip
removeTooltip(tooltip) {
      tooltip.transition()
        .duration(100)
        .style("opacity", 0);
}

You can style the tooltip however you want. Make sure to add appropriate z-index if necessary.

.tooltip {
    fill: white;
    stroke: #000;
    opacity: 0.75;
}

// Append the tooptip when you first draw the d3 graph, and call the tooltip to add new HTML element on mouseover.

var tooltip = appendTooltip();

element.on("mouseover", d => showtooltip(tooltip, d);)