JSFiddle - React, Tailwind, and code Playground

by nomelnomel

HTML

<div class = "foot-prix" >Dés &nbsp;
  <span class = "prix-sejour">496 €</span>
  <div class = "mark" id="i-have-a-tooltip" data-description="Подсказка.">
<img src = "https://i.ibb.co/6ZwjYNZ/info-1.png" >
</div>
</div>

CSS

.foot-prix{
  margin-top: 400px;
  width:200px;
  height:50px;
  /*paddi0ng:10px 20px;*/
  justify-content:center;
  color:#fff;

  align-items: center;
  font-weight:normal;
  line-height: 50px;
  text-align:center;
}

.foot-prix{
  background:#0085ff;
  position:relative;
}
.mark{
  position:absolute;
  top:-5px;
  right:3px;
}
.mark > img{
  width: 23px;
}

#i-have-a-tooltip:before {
 content:attr(data-description);
 box-sizing:border-box;
 background:#e5e5e5;
 color:#000;
  font-size: 13px;
      line-height: 15px;
    text-align: left;
 padding:10px;
 position:absolute;
 right:-100%;
 width:150px;
 height:65px;
 display:none;

  box-shadow: 2px 2px 2px #bfbfbf;
}
 
#i-have-a-tooltip:after {
 content:'';
 position:absolute;
 right: 0;
 border-right:8px solid transparent;
 border-top:8px solid #e5e5e5;
 display:none;

}
 
#i-have-a-tooltip:hover:before {
display: block;
 top:-70px;
}
 
#i-have-a-tooltip:hover:after {
 display: block;
  top: -5px;

}