JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="exampleSVG" xmlns="http://www.w3.org/2000/svg"></svg>

CSS

path {
    fill: #ccc;
}
path:hover {
    fill: #ff0;
}

JavaScript

function createPathContent(svgID, popupText, pathDirections) {
    var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute("d", pathDirections);
    var popup = document.createElementNS("http://www.w3.org/2000/svg", "title");
    popup.appendChild(popupText);
    path.appendChild(popup);
    console.dir( popup );
    document.getElementById(svgID).appendChild(path);
}

function createPathHTML(svgID, popupText, pathDirections) {
    var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute("d", pathDirections);
    var popup = document.createElementNS("http://www.w3.org/2000/svg", "title");
    popup.innerHTML = popupText;
    path.appendChild(popup);
    document.getElementById(svgID).appendChild(path);
}

function createExample(svgID) {
    document.getElementById(svgID).setAttribute("xmlns", "http://www.w3.org/2000/svg");
    document.getElementById(svgID).setAttribute("version", "1.1");
    document.getElementById(svgID).setAttribute("width", "300");
    document.getElementById(svgID).setAttribute("viewBox", "0 0 100 100");
    document.getElementById(svgID).setAttribute("preserveAspectRatio", "xMinYMin meet");

    var style = document.createElement("style");
    style.setAttribute("type", "text/css");
    style.innerHTML = "path { fill: #ccc; } path:hover { fill: #ff0; }";
    document.getElementById(svgID).appendChild(style);

    var NEW_LINE = "\r\n";
    
    var p = document.createElement("p");
    
    var fragment = document.createDocumentFragment();
        fragment.appendChild( document.createTextNode( "First Line\r" ) );
        fragment.appendChild( document.createElement( "br" ) );
        fragment.appendChild( document.createTextNode( "Second Line" ) );

    createPathContent(svgID, fragment, "M 10 10 L 90 10 L 90 45 L 10 45 Z");
    // Works correctly in Chrome or Firefox.  Displays in IE 11, but only on a single line.

    createPathHTML(svgID, "Tooltip text using...