Поместите подсказку с помощью svg поверх элементов над элементами

Question

Я бы создал подсказку вручную.

У меня есть элементы, которые помещены с атрибутом transform. На самом деле я могу показать прямоугольник при наведении на элемент.

Проблема заключается в том, что всплывающая подсказка отображается как элемент наведения (из-за атрибута transform)

Это способправильно расположите его над элементом (без поворота, как атрибут заголовка), и это работает при масштабировании?

Если бы я пошел дальше, можно ли визуализировать угловой компонент или элементы html (лучше для жеста макета)

    var data = [{
    train: 1
}, {
    train: 2
}, {
    train: 3
}, {
    train: 4
}]
    let svg =d3.select('svg')
        var zoomFn = d3.zoom().on('zoom', function() {
      svg.attr('transform', d3.event.transform);
    });
        svg.call(zoomFn);


    for(let i=0;i<4;i++) {
  svg.append('rect').attr('id','t'+(i+1)).attr("width",100).attr('height',100).attr('transform','rotate(-10 50 100) translate('+i*4*30.5+' '+i*4*20.5+')')
}
let selectedElms = d3.selectAll('rect')
  .data(data, function(d) {
    return (d && 't'+d.train) || this['id'];
  })
this.ids=selectedElms
selectedElms
  .on('mouseover', d => {
              let trainPath = d3.select('#t' + d.train);
              svg
                .append('g')
                .attr('id', 'tooltips')
                .append('rect')
                .attr('height', 100)
                .attr('width', 100)
                .attr('transform', trainPath.attr('transform'))
                .attr('y', 100)
                .attr('fill', 'red')
                .attr('id', 't' + d.train);
            })
  .on('mouseout', d=> svg.select('#tooltips').remove());
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg height="400" width="500">

Вот Демо