JSFiddle - React, Tailwind, and code Playground

HTML

<script>
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.textContent = popupText; // <-- LINE TO FOCUS ON
path.appendChild(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; // <-- LINE TO FOCUS ON
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";

createPathContent(svgID, "Tooltip text using textContent:" + NEW_LINE + "New Line", "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 innerHTML:"   + NEW_LINE + "New Line", "M 10 55 L 90 55 L 90 90 L 10 90 Z");
// Works correctly in Chrome or Firefox.  Does not display in IE 11.
			}
</script>
<svg id="exampleSVG" xmlns="http://www.w3.org/2000/svg"></svg>
<script>createExample("exampleSVG");</script>