JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

CSS

.paper-tooltip {
            font-family: 'Courier';
            font-size: 14px;
            width: 500px;
            /*position: absolute;*/
            display: inline-block;
            margin: auto;
            padding: 15px 0;
            color: #212121;
            line-height: 16px;
              
            -webkit-border-bottom-left-radius: 20px 500px;
            -webkit-border-bottom-right-radius: 500px 30px;
            -webkit-border-top-right-radius: 5px 100px;
            
            -moz-border-radius-bottomleft: 20px 500px;
            -moz-border-radius-bottomright: 500px 30px;
            -moz-border-radius-topright: 5px 100px;
              
            border-radius-bottomleft: 20px 500px;
            border-radius-bottomright: 500px 30px;
            border-radius-topright: 5px 100px;
              
            background: #FFFFFF;
            background:
                -webkit-gradient(
                  linear,
                  left top, left bottom,
                  from(#81cbbc),
                  color-stop(2%, #FFFFFF)
                );
                
            background:
                -moz-repeating-linear-gradient(
                  top,
                  #FFFFFF,
                  #FFFFFF 38px,
                  #81cbbc 40px
                );
                
            background:
                repeating-linear-gradient(
                  top,
                  #FFFFFF,
                  #FFFFFF 38px,
                  #81cbbc 20px
                );
                
            -webkit-background-size: 100% 32px;
              
            -webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
            box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
      }

      .paper-tooltip:before {
          content: ' ';
          /*background: url(img/tape.png) no-repeat;*/
          width: 129px;
          height: 38px;
          position: absolute;
          top:...

JavaScript

var body = d3.select("body");

var svg = body.append("svg");

var tooltipContainer = svg.append("svg:g");

var html = tooltipContainer.append("foreignObject")
var div = html.append("xhtml:div")
    .attr('class', 'paper-tooltip')
    .html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. ");

console.log($(div[0][0]).outerHeight(true));
console.log($(div[0][0]).outerWidth(true));

console.log(tooltipContainer[0][0].getBBox());
//console.log(div[0][0].getBoundingClientRect());
var bcr = div[0][0].getBoundingClientRect();

html.attr('x', 50)
    .attr('y', 50)
    //.attr('width', $(div[0][0]).outerWidth(true))
    //.attr('height', $(div[0][0]).outerHeight(true));
    .attr('width', bcr.width)
    .attr('height', bcr.height);

console.log(tooltipContainer[0][0].getBBox());