Form Description ? Pop Up

image-asset.png

Step One

From your Squarespace account, go to Site Code Injection: Settings > Advanced > Code Injection

Copy and paste the code below into the Code Injection Header. Once added, hit save.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script>$(document).ready(function(){$("<tt>?</tt>").insertBefore($("form .description")),$("tt").on({mouseenter:function(){$(this).next().addClass('hover')},mouseleave:function(){$(this).next().removeClass('hover')}})});</script>

Step Two

Next, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Copy and paste the code below into the Custom CSS Editor box.

// Form Description Icon Pop Up // 

@media all and (min-width: 1200px){
  tt{
    font-family: inherit;
    font-weight: 600;
    position: absolute;
    right: 0px;
    top: 5px;
    padding: 1px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    text-align: center;
    cursor: pointer;
    border: solid 0px;
    border-radius: 200px;
    color: #000000;
    background-color: #fafafa;
    -webkit-transition: all .2s ease-in-out !important;
    -moz-transition: all .2s ease-in-out !important;
    -o-transition: all .2s ease-in-out !important;
    transition: all .2s ease-in-out !important;
  }
  tt:hover{
    color: #fecb2f;
    border-color: #fecb2f;
  }

  .description{
    position: absolute;
    bottom: 100%;
    right: 0%;
    background-color: #000 !important;
    margin-bottom: 10px;
    margin-right: 10px;
    z-index: 99999;
    opacity: 0 !important;
    width: 100%;
    padding: 10px 15px !important;
    max-width: 200px;
    border: solid 1px #000;
    border-radius: 3px;
    color:  #fff !important;
    -webkit-transition: all .2s ease-in-out !important;
    -moz-transition: all .2s ease-in-out !important;
    -o-transition: all .2s ease-in-out !important;
    transition: all .2s ease-in-out !important;
  }

  .sqs-block-form .hover{
    opacity: 1 !important; 
  }
}

Step Three

Feel free to change any color values to switch up the question mark icon color.

Save and refresh the page. 👍

Moov Labs