JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div class=header>
<span>Дистрибьютор отопительного оборудования 
    <span class="description">
        <a href="##"></a>
         <span>Комплексная поставка, проектирование, монтаж и сопровождение инженерных систем.Работаем с оптовыми клиентами и регионами РФ.</span>
    </span>
</span>
</div>

CSS

a[href^="##"]:before {
    display: inline-block;
    width: 12px;
    height: 6px;
    margin-right: 0.5em;
    content:"arrow";
    background: url(../img/bullet.png);
}
.header span {
    font:10px Verdana;
    color:rgb(96, 96, 96);
    padding-top:46px;
    /* padding-left:797px; */
    text-align:left;
    display: block;
    /* position:relative; */
}
.description{
    position: relative;
    display: inline !important;
}
.description span {
    display:none;
    position:absolute;
    color:#EBECF7;
    margin:0px;
    padding:5px;
    width:163px;
    background:green;
    white-space:pre-wrap;
}
.description:hover span {
    display:block;
}