JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<!-- Styling hovertext -->

<div id="wrapper">
    <span id="hoverElement" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien felis, fermentum nec enim nec, placerat viverra libero. Vivamus eu mauris at nisi iaculis molestie in eget arcu. Sed sodales condimentum molestie. Quisque posuere, lacus sed gravida congue, purus tellus fermentum augue, nec pretium justo lectus quis nunc. Aenean tempor, ante consectetur ullamcorper condimentum, est orci ultricies diam, in sodales felis justo eget dolor. Fusce in vestibulum nisi. Donec non suscipit lectus. Praesent diam sem, porttitor ut turpis et, gravida eleifend risus.">Hover over me!</span>
</div>

CSS

#wrapper {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    background: orange;
}

#hoverElement {
    position: relative;
    padding: 4em;
    width: auto;
    display: inline;
    left: 50%;
    top: 50%;
    background: green;
    font: bold normal 1em/1em 'verdana';
    color: white;
}

#hoverElement:hover {
    position: relative;
    cursor: pointer;
}

#hoverElement[title]:hover:after {
    content: attr(title);
    position: absolute;
	padding: 1em;
    color: #333;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 999;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}