JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<div class="box"></div>
<div class="tooltip"></div>

JavaScript

/**
         * Replaces special characters e.g. < > with escape character entity references
         * see http://dev.w3.org/html5/html-author/charref
         * 
         * @param {string} str The string to escape
         */
        function escapeHTML (str) {
            if (typeof str === 'string') {
                return str.replace(/&/g, "&#38;").replace(/</g, "&#60;").replace(/>/g, "&#62;").replace(/"/g, "&#34;").replace(/'/g, "&#39;").replace(/\//g, "&#47;");
            } else {
                return str;
            }
        }

var value = escapeHTML('<b>Bold?</b>');
var box = document.getElementsByClassName('box')[0];
box.innerHTML = '<div class="inner-box" tooltip="' + value + '">' + value + '</div>';

var tooltip = document.getElementsByClassName('tooltip')[0];
var innerBox = document.getElementsByClassName('inner-box')[0];


innerBox.setAttribute('tooltip', value);
tooltip.innerHTML = innerBox.getAttribute('tooltip');