Skip to content

Instantly share code, notes, and snippets.

@felipegenuino
Last active July 18, 2020 05:31
Show Gist options
  • Save felipegenuino/955999e8596ca755a7afb559935a07a4 to your computer and use it in GitHub Desktop.
Save felipegenuino/955999e8596ca755a7afb559935a07a4 to your computer and use it in GitHub Desktop.
popover-landpage.html
/*
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 );
}
.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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment