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 {
    font: normal 12px/1.5 "Lucida Grande", arial, sans-serif;
    width: 300px;
    margin: 0 auto 10px;
    padding: 6px 5px 4px 42px;
    /*position: relative;*/
    display: inline-block;
    color: #444;
    line-height: 20px;
    border: 1px solid #d2d2d2;
 
    background: #fff;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
    background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
 
    -webkit-background-size: 100% 20px;
    -moz-background-size: 100% 20px;
    -ms-background-size: 100% 20px;
    -o-background-size: 100% 20px;
    background-size: 100% 20px;
 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.paper::before {
    content: '';
    position: absolute;
    width: 4px;
    top: 0;
    left: 30px;
    bottom: 0;
    border: 1px solid;
    border-color: transparent #efe4e4;
}



.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...

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();

// Get box-shadow property value
var shadow_size = $(div[0][0]).css('box-shadow');
 
// Remove all possible color definitions
shadow_size = shadow_size.replace(/rgba?\([^\)]+\)/gi, '');
shadow_size = shadow_size.replace(/#[0-9a-f]+/gi, '');
 
// Remove any alpha characters
shadow_size = $.trim(shadow_size.replace(/[a-z]+/gi, ''));

// Split into an array and map to integers
shadow_size = shadow_size.split(' ').map(Number);

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

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