JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<div>
    <ul>
        <li href="#">
            <div>1990</div>
            <div class="tooltip">
                <img class="linkDate" src="http://lorempixel.com/50/50/"/>
                <span class="caixaTexto" style="position: absolute;">
                    <strong>Tooltip1</strong>
                    <br/>
                    BAL BLA 1.
                </span>
            </div>
        </li>
        <li href="#">
            <div>1995</div>
            <div class="tooltip">
                <img class="linkDate" src="http://lorempixel.com/50/50/"/>
                <span class="caixaTexto" style="position: absolute;">
                    <strong>Tooltip1</strong>
                    <br/>
                    BAL BLA 2.
                </span>
            </div>
        </li>
        <li href="#">
            <div>1996</div>
            <div class="tooltip">
                <img class="linkDate" src="http://lorempixel.com/50/50/"/>
                <span class="caixaTexto" style="position: absolute;">
                    <strong>Tooltip1</strong>
                    <br/>
                    BAL BLA 3.
                </span>
            </div>
        </li>
        <li href="#">
            <div>1997</div>
            <div class="tooltip">
                <img class="linkDate" src="http://lorempixel.com/50/50/"/>
                <span class="caixaTexto" style="position: absolute;">
                    <strong>Tooltip1</strong>
                    <br/>
                    BAL BLA 4.
                </span>
            </div>
        </li>
    </ul>
</div>

CSS

ul
{
    list-style-type: none;
    display: flex;
}

.tooltip .caixaTexto strong 
{
    line-height: 25px;
}
.tooltip .caixaTexto
{ 
    display: none; 
    padding: 10px 16px 16px 16px;
    width: 300px; 
    line-height: 14px;
    color: #EEE;
    background: #666;
    
}
.linkDate
{
    cursor:pointer;
}

JavaScript

$(function()
  {           
      $(".tooltip").hover(
          function()
          {
              //posicoes da imagem
              var imageToolTip = $(this).find(".linkDate");
              var position = imageToolTip.offset();
              var height = imageToolTip.outerHeight();
              var width = imageToolTip.outerWidth();
              
              //posicionamento para a futura seta
              var arrowHeight = 10;
              
              //posicoes para a caixa de texto que irá aparecer por baixo
              var spanToolTip = $(this).find(".caixaTexto");
              var tooltipWidth = spanToolTip.outerWidth();
              var left = position.left + ((width/2) - (tooltipWidth/2));
              var top = position.top + height + arrowHeight;
              
              if(left<0)
                  left=0;
              else
                  if(left > $( window ).width()-tooltipWidth)
                      left = $( window ).width()-tooltipWidth;
       
              spanToolTip.show();
              spanToolTip.css("left",left);
              spanToolTip.css("top",top);              
          },
          function()
          {
              var spanToolTip = $(this).find(".caixaTexto");
              spanToolTip.hide();
          }
      );
})