JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<p>
    fjeqkhfqwfqwf
    <br/>
    wefwevewvewve
    <br/>
    wefwevewvewve
    <br/>
    wefwevewvewve
</p>
        
<div id="msgContent" style="position: absolute;"></div>
        
<div style="position:relative">
    <ul>
        <li href="#">
            <div>1990</div>
            <div class="tooltip">
                <img class="linkDate" src="http://lorempixel.com/50/50/"/>
                <img class="arrowDate" src="http://lorempixel.com/16/16/"/>
                <div class="caixaTexto" style="position: absolute;">
                    <div class="tituloToolTip">Tooltip 1</div>
                    <div class="bodyToolTip">BAL BLA 1.</div>
                </div>
            </div>
        </li>
        <li href="#">
            <div>1995</div>
            <div class="tooltip">
                <img class="linkDate" src="http://lorempixel.com/50/50/"/>
                <img class="arrowDate" src="http://lorempixel.com/16/16/"/>
                <div class="caixaTexto" style="position: absolute;">
                    <div class="tituloToolTip">Tooltip 2</div>
                    <div class="bodyToolTip">BAL BLA 2.</div>
                </div>
            </div>
        </li>
        <li href="#">
            <div>1996</div>
            <div class="tooltip">
                <img class="linkDate" src="http://lorempixel.com/50/50/"/>
                <img class="arrowDate" src="http://lorempixel.com/16/16/"/>
                <div class="caixaTexto" style="position: absolute;">
                    <div class="tituloToolTip">Tooltip 3</div>
                    <div class="bodyToolTip">BAL BLA 3.</div>
                </div>
            </div>
        </li>
        <li href="#">
            <div>1997</div>
            <div class="tooltip">
                <img class="linkDate" src="http://lorempixel.com/50/50/"/>
                <img class="arrowDate" src="http://lorempixel.com/16/16/"/>
                <div class="caixaTexto" style="position: absolute;">
            ...

CSS

.tooltip
{
    height: 50px;    
}

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

div.caixaTexto
{ 
    display: none; 
    padding: 8px 10px 8px 10px;
    width: 200px; 
    line-height: 14px;
    color: #EEE;
    background: #666;
    
}

.caixaTexto .tituloToolTip 
{
    font-size: 20px;
    line-height: 20px;
}

.caixaTexto .bodyToolTip 
{
    font-size: 12px;
    line-height: 20px;
}

.linkDate
{
    cursor:pointer;
}

.arrowDate
{
    padding-left: 19px;
    display:none;
}

JavaScript

$(function()
  {
      $(".tooltip").hover(
          function()
          {
              //get da posicão da imagem à qual fixzemos o hover
              var imageToolTip = $(this).find(".linkDate");          
              var height = imageToolTip.outerHeight();
              var width = imageToolTip.outerWidth();
              
              //get da altura da imagem da seta
              var arrowImg = $(this).find(".arrowDate");  
              var arrowHeight = $(".arrowDate").outerHeight()+4;
              
              //set do posiconamento que queremos para a 'msgContent'
              var position = imageToolTip.offset();
              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;
              
              //atribuição das coordenadas correctas à 'msgContent'
              var divMsgContent=$("#msgContent");
              divMsgContent.css("left",left);
              divMsgContent.css("top",top);
              divMsgContent.show(); //show da carcaça sem conteudo
              //divMsgContent.empty();
              
              arrowImg.css("display","flex"); //show da seta
              
              //atribuição do conteudo correcto à 'msgContent'
              var temp = spanToolTip.clone();
              divMsgContent.append(temp);   
              temp.show(); //show do conteudo dentro da carcaça
          },
          function()
          {
              //var spanToolTip = $(this).find(".caixaTexto");
              var divMsgContent = $("#msgContent");
              divMsgContent.hide();
              
              var arrowImg =...