JSFiddle - React, Tailwind, and code Playground

HTML

<button class="uk-button uk-button-primary tooltiper" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non justo facilisis, aliquet eros at, rutrum magna. Integer finibus mauris nec fermentum finibus. Fusce augue tellus, tristique eget dapibus id, dignissim nec erat. Etiam fringilla at sapien placerat accumsan. Nunc sit amet metus sem. Vivamus in urna nibh. Praesent pretium vel neque eu consequat.

Donec urna massa, porta sit amet libero sit amet, varius auctor libero. Sed libero leo, tincidunt non massa at, feugiat consequat tellus. Vestibulum ac euismod velit, id egestas est. Sed est dui, finibus eu interdum ut, posuere ut eros. Aenean hendrerit eros lectus, sit amet dapibus orci lacinia eu. Nulla sagittis augue eget ligula hendrerit dignissim nec lacinia nisl. Pellentesque eget lorem vulputate, venenatis turpis fringilla, ornare turpis. Fusce vehicula augue cursus tortor egestas aliquet. Nulla nec mollis velit, ac condimentum purus. Vivamus magna justo, luctus et iaculis non, viverra blandit ex. Maecenas aliquam bibendum nulla, id blandit sem vulputate sed. Nam hendrerit placerat tristique." >Hover me</button>

CSS

.tooltiper {
    display: inline;
    position: relative;
}

.tooltiper:hover {
    color: #c00;
    text-decoration: none;
}

.tooltiper:hover:after {
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: .5em;
    bottom: 1.35em;
    color: #fff;
    content: attr(title);
    display: block;
    left: 1em;
    padding: .3em 1em;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
}

.tooltiper:hover:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}