popover-landpage.html

script.js

/* 
  carrega o código após carregamento da landpage
  foi feito dessa forma, pois o popover precisa ser carregado após carregar o form do RD
*/
window.onload = function(){ 
  const $message = '<span class="lp-popover-target" tabindex="0"> icone </span> <div class="lp-popover-content"> O projetista deve preencher os dados do formulário e enviar um link compatível (via Google Drive, Dropbox, Mega, etc) com os arquivosdo projeto no formato do software (Eberick e/ou QiBuilder) e IFC + um vídeo curto (de até 30 segundos) do modelo em realidade aumentada. </div>'
  let $popover = $( "<div class='lp-popover'>" + $message+ "</div>" );
  $('label[for=rd-text_field-kcossuew].bricks-form__label').append( $popover );   
}

style.css

.lp-popover {
  display: initial;
  border: 1px solid red;
  position: relative;
}

.lp-popover-target {
  cursor: pointer;
  background-repeat: no-repeat;
  background-image: url(https://lp.altoqi.com.br/wp-content/uploads/2020/07/06_07_lp_concurso_146896_info.svg);
  width: 16px;
  font-size: 0 !important;
  height: 16px;
  display: inherit;
  position: absolute;
  top: 1px;
  left: 4px;
}
.lp-popover:focus .lp-popover-content,
.lp-popover:hover .lp-popover-content { 
  opacity: 1;
  transform: translateY(0px);
  z-index: 1000;
  display: block;
}

 .lp-popover .lp-popover-content { 
  position: relative;
  z-index: 10000;
  background: rgba(21, 188, 175, 1);
  width: 360px;
  padding: 20px !important;
  border-radius: 20px;
  box-shadow: 4px 4px 0 0 rgba(21, 131, 118, 1);
  top: 0;
  transition: 0.2s all linear;
  left: 0;
  opacity: 0;
  transform: translateY(15px);
  z-index: -1;
  display: none;
}

@media (min-width: 1245px) 
{
  .lp-popover:focus .lp-popover-content,
  .lp-popover:hover .lp-popover-content { 
    display:initial;
  }

  .lp-popover .lp-popover-content {
     position: absolute;
     display:initial;
  }
}