JSFiddle - React, Tailwind, and code Playground

by swaroop206

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>

<svg></svg>

CSS

div.tooltip {
        position: absolute;
        top:14px;
        left: 62px;
        text-align: center;
        width: 100px;
        height: 40px;
        padding: 2px;
        font: 12px sans-serif;
        background: white;
        border-radius: 8px;
        pointer-events: none;
        z-index: 999999;
      }

      .imagen_tweet{
        width: 20px;
        height: 20px;
      }

JavaScript

body = d3.select('body')
     svg = body.append('svg').attr('height', 600).attr('width', 600)     
     
     var div= svg.append('foreignObject')
     	.attr("width", 50)
    	.attr("height", 50)
     .append("xhtml:div")
     .attr("class", "tooltip")
     .style("opacity", 1);
      div.append('img')
     .attr("id", "img_tweet").attr("src", "https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg")
     .attr("class", "imagen_tweet");
     div.append('div').attr("id", "texto_tweet");
     
    //document.getElementById('img_tweet').src="https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg";
    document.getElementById('texto_tweet').innerHTML='message'