JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<h1 title="heading title text">Header</h1>
<p title="this would be a paragraph, then.">Paragraph text, lorem ipsum and so forth...</p>

CSS

h1, p {
    width: 50%;
    margin: 0 auto 1em auto;
    position: relative;
}
h1:hover:after,
p:hover:after {
    content: attr(data-title);
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    border: 3px solid #f90;
}

JavaScript

var titled = document.querySelectorAll('[title]');
var numTitled = titled.length;

for (i=0; i<numTitled; i++){
    titled[i].setAttribute('data-title',titled[i].title);
    titled[i].removeAttribute('title');
}