JSFiddle - React, Tailwind, and code Playground

by jomikr

HTML

<fieldset class="signup-item"><div class="ck agree-statement">
   <input id="pancho" name="cm-fo-ykdl" type="checkbox" value="14991" /> 
   <label for="pancho">I have read the Privacy Policy and Terms of Use.</label></div>
<div class="terms-of-use"> 
<p>By checking this box and clicking sign up below, you agree to allow XXXX to save information such as time of day, browser type, browser language, and IP address with each visit to our website. XXXX does not sell any information about you, including your email address, to other parties.</p>
</div>
</fieldset>

CSS

.ck { margin: 12px 0; font-size: 13px; }
.ck input { float: left; }
.ck label { width: 280px; padding-left: 5px; display: inline-block; }
.terms-of-use { 
    position: absolute; height: 95px; width: 267px; 
    margin: -15px 0 0 10px; padding: 25px 10px 10px 15px; 
    line-height: 16px; font-size: 11px; 
    background: yellow; 
}

JavaScript

$(function(){
    // email results page tooltip hover
    $('.terms-of-use').hide();
    $('.signup-item').hover(function(){
        $('.terms-of-use').stop(true, true).fadeIn(); 
    }, function(){
        $('.terms-of-use').stop(true, true).fadeOut(); 
    });
    
});