JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-12 tooltip">
    <input type="text" required />
    <span>
        <strong>Some text</strong><br />
        <ul>
            <li> Some text</li>
            <li> Some text</li>
            <li> Some text</li>
            <li> Some text</li>
        </ul>
    </span>
</div>

CSS

.tooltip {
    display: inline;
    margin: 0;
    padding: 0;
    position: relative;
}
.tooltip span {
    background: blue;
    border-radius: 10px;
    box-shadow: 2px 2px 3px #666;
    color: #fff;
    height: auto;
    min-height: 30px;
    position: absolute;e
    text-align: left;
    visibility: hidden;
    white-space: nowrap;
    width: auto;
}
.tooltip span:after {
    border-bottom: 8px solid transparent;
    border-right: 8px solid blue;
    border-top: 8px solid transparent;
    content: '';
    height: 0;
    margin-top: -8px;
    position: absolute;
    right: 100%;
    top: 16px;
    width: 0;
}
.tooltip:hover span {
    left: 100%;
    margin-left: 15px;
    margin-top: -15px;
    filter: alpha(opacity=100);
    opacity: 1;
    padding: 8px 16px;
    top: 50%;
    visibility: visible;
    z-index: 999;
}

@media (max-width: 350px) {
    .tooltip span:after {
        border-left: 8px solid transparent;
        border-bottom: 8px solid blue;
        border-right: 8px solid transparent;
        content: '';
        height: 0;
        position: absolute;
        left: 30%;
        top: -8px;
        width: 0;
    }

    .tooltip:hover span {
        left: 0;
        margin-top: 20px;
    }
}