JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tooltip">
    <span class="tip">
        Woord
    </span>
</div>
<hr>
<a href="#mytooltip" class="tooltip">hover me</a>
    <span id="mytooltip" class="tip">
        Meer tekst die dus gaat wrappen maar maximaal tot 200px die ik met de max-width heb gezet
    </span>

CSS

body {
    margin-top: 75px;
}
hr {
    margin: 10px 0;
}
.tooltip {
    background: url(http://famfamfam.nl/famicons/information.png) left top no-repeat;
}
.tip {
    display: none;
}

.tooltip:hover+.tip {
    position: absolute;
    display: inline-block;
    max-width: 200px;
    padding: 2px;
    background-color: yellow;
}