JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tarif-included">
    <li>
<span class="t_desc">
    <span>Предложение которое видет посетитель.</span>
</span>
<div class="tooltip">
    <div>Текст который виден при наведение на надпись</div>
</div>
    </li>

CSS

.tarif-included li .t_desc {
  display:inline-block;
  width:152px;
  margin:0 0 0 10px;
  font-size:13px;
  line-height:1.3em;
}
.tarif-included li .t_desc span { background: url("http://megagroup.ru/d/738331/t/v2924/images/less/../gray-dot.gif") 1px 100% repeat-x; }
.tarif-wrap { margin:30px -14px 45px; }
.tarif-tabs-nav {
  list-style:none;
  line-height:0;
  font-size:0;
  padding:0;
  margin:0;
  margin:0 1px -4px;
  overflow:hidden;
}
.tooltip {
    display: none;
}
.tarif-included {
     list-style:none;
     line-height:0;
     padding:0;
     margin:0;
     margin:20px 0 50px;
}
.tarif-included li {
  display:inline-block;
  *display:inline;
  zoom:1;
  margin:0 20px 25px 0;
  cursor:pointer;
  vertical-align:top;
}
.tooltip, .site-promo-popup {
display: none;
background:#ffffff;
    padding:10px;
}

JavaScript

$( ".t_desc" )
  .mouseover(function() {
    $( this ).parent("li").children("div.tooltip").show();
  })
  .mouseout(function() {
    $( this ).parent("li").children("div.tooltip").hide();
  })
;