JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <label for="name">Name: </label>
    <input type="text" id="name" />
    <label for="email">Email Address: </label>
    <input type="email" id="email" />
    <label class="phone" for="phone" title="We need your phone number because we would like to call you as soon as you fill out this form" >Phone Number: </label>
    <input type="phone" id="phone" />
    <div id="privacyPolicy">
        <h3>Our Privacy Policy</h3> 
        <p></p>
    </div>
    <input type="submit" value="Submit" />
</form>

CSS

body {
    font-size: 11pt;
}

form {
 border: 1px solid #aaa;
 padding: 0.5em;  
}

input{
 margin-top: 0.2em;
}
    
label {
 display: block;
 margin-top: 0.5em;
    
}

h3 {
    font-size: 1.3em;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #999;
}

p {
    font-size: 1.0em;
}

label.phone {
  cursor: help;
}

/** Enhanced Styles **/
label.phone-enhanced {

}

.hidden{
    display:none;
}

.tooltip {
    display:inline;

}

JavaScript

// Imagine that we have a form sent from the server like the one in the HTML pane. The form is following a progressive enhancement approach and is usable for browsers with reduced capabilities and/or JavaScript disabled.
// Our job is to take the form and using JavaScript and jQuery create enhanced tooltips for the form. 
// We want to add two tooltip enhancements:
// Task 1) We want the tooltip for the phone number to be much easier for the client to notice. Typically we would add an icon to the right of the label. For our exercise, lets just add a "?" character in an element. When the user hovers over the character we want to display the tooltip.
// Step 1: Move the title to a hidden div. Add a class of tooltip to the div so that the tooltip will be styled.
// Step 2: add an element next to the label with a single "?" character inside
// Set 3: add behavior to the element so that when hover occurs, the tooltip is shown.
// BEGIN Task 1 ANSWER
// END Task 1 ANSWER
// Task 2) We want the privacy policy to also become a tooltip. To do this we need to move the privacy text into a hidden element, and then show the element when hovering over the privacy policy heading.
// BEGIN Task 2 ANSWER
$("#privacyPolicy > p ").hide();

    $("#privacyPolicy")
        .bind("mouseover", function() {
           $(this).children("p").show(888);
         })
        .bind("mouseout", function() {
           $(this).children("p").hide(999);

         });
    
 

    // END Task 2 ANSWER
    $("form").bind("submit", function(evt) {
        evt.preventDefault();
        evt.stopImmediatePropogation();
    });