JSFiddle - React, Tailwind, and code Playground

by dave ho

HTML

<div>
<input type="text"/>
<div class="tooltip">
    Alesuada turpis, in placerat magna fringilla in. Donec condimentum, nisl sed ornare tincidunt, lacus tortor placerat felis, consectetur porta enim leo a quam. Integer tincidunt tincidunt facilisis. Curabitur a gravida neque. Morbi arcu nunc, dignissim egestas dictum non, tincidunt non neque.
</div>
    <div>
<input type="text"/>
<div class="tooltip">
    Vivamus aliquet purus dolor, eu fermentum diam gravida at. In dignissim, ex in finibus condimentu.
</div>
</div>
</div>

CSS

input {
    position: relative;
    margin: 20px 0;
} 

input:focus {
    border: 1px solid #000;
    outline: none;
}

input:focus ~ .tooltip {
    display: inline-block;
    position: absolute;
}

.tooltip {
    width: 300px;
    padding: 15px;
    background-color: #fc0;
    color: #000;
    border-radius: 10px;
    border: 2px solid #000;
    margin: 10px 0 0 20px;
    display: none;
}

.tooltip::before {
    position: absolute;
    display: inline-block;
    border-top: 10px solid transparent;
    border-right: 10px solid #000;
    border-bottom: 10px solid transparent;
    border-right-color: rgba(0, 0, 0, 1);
    left: -10px;
    top: 5px;
    content: '';   
}