JSFiddle - React, Tailwind, and code Playground

HTML

<section>

    text bsp
    <div class="tooltips">
        <i class="icon-help">(?)</i>
        <div>bsp tooltip text, bsp tooltip text, bsp tooltip text, bsp tooltip text, bsp tooltip text, </div>
    </div>

</section>

CSS

.tooltips {
    position: relative;
    display: inline;
}
.tooltips div {
    position: absolute;
    padding:8px;
    max-width:320px;
    min-width:180px;
    font-family:sans-serif,Arial,Helvetica;
    font-style:normal;
    font-size:15px;
    font-weight:normal;
    text-decoration:none;
    color:#000000;
    background:#FFF6C3;
    border:2px solid #FFEE88;
    border-radius: 0.3em;
    box-shadow: 0.25em 0.25em 0.4em #AAAAAA;
    white-space:normal;
    text-align: center;
    visibility: hidden;
}
.tooltips div:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 7%;
    margin-left: -12px;
    width: 0; height: 0;
    border-bottom: 12px solid #FFEE88;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
}
.tooltips div:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 7%;
    margin-left: -8px;
    width: 0; height: 0;
    border-bottom: 8px solid #FFF6C3;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}
.tooltips:hover div {
    visibility: visible;
    opacity: 1;
    top: 28px;
    left: 0%;
    margin-left: -4px;
    z-index: 999;
}


.icon-help{
    background:yellow;
}