Neste post eu vou compartilhar com você um código simples em CSS para que você consiga criar tooltips que são aqueles balões que aparecem em texto quando você passa um mouse em cima de algum objeto, de maneira muito simples utilizando apenas um pouco de CSS no seu HTML. Você pode também utilizar esse código CSS na sua instalação de WordPress com Elementor.

<div class="tooltip">Passe o mouse aqui
  <span class="tooltip-text">Este é um tooltip</span>
</div>
.tooltip {
  position: relative;
  cursor: pointer;
}

.tooltip .tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 2;
  top: -20%;
  left: 50%;
  bottom: auto;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  bottom: auto;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* CASO QUEIRA MUDAR A EXIBIÇÃO DE CIMA PARA BAIXO */
.tooltip.reverso .tooltip-text {
  bottom: -20%;
  top: auto;
  left: 50%;
}

.tooltip.reverso .tooltip-text::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
}