Добавление и встраивание проблемы SVG в элемент HTML

Question

В настоящее время я создаю всплывающую подсказку для сгенерированного графика D3. Ниже приведен фрагмент кода, уменьшенный, чтобы включить только проблему всплывающей подсказки. Если вы настроите всплывающую подсказку как Div и добавите ее в DOM через D3, я смогу затем выбрать ее и добавить текст, но я не могу вставить в нее новый прямоугольный элемент SVG. У D3 есть специальный метод для этой операции?

.chart{
    background-color: white;
}
.toolTip {
 position: absolute;
 height: 100px;
 width: 100px;
 background: #ffffff;
 border: 1px solid #6F257F;
 padding: 0.1rem;
 text-align: center;
 }


(function(){

var margin = {left:60,right:50,top:100,bottom:5}
var width = 500 -margin.right-margin.left;
 var height= 800 -margin.top-margin.bottom;

var svg = d3.select(".chart")
.attr("width",width+margin.left+margin.right)
.attr("height",height+margin.top+margin.bottom)

var g = d3.select(".chart").append("g")
.attr("transform",`translate(${margin.right},${margin.top}`)

 var tooltip = d3.select("body").append("div")
.attr("class", "toolTip").append("text").text("Tooltip");

 d3.select(".toolTip")
 .append("rect")
 .attr("x",10)
 .attr("y",10)
 .attr("width",10)
 .attr("height",100)
 .style("fill","red")

 })()