Sticky Popup

HTML

<p>
    <b>Goal</b><br />
    Show/hide the popup on hover<br />
    Make popup sticky when user clicks on it (interacts with form)<br />
    Dismiss popup on submit
</p>

<div id="helloworld">
    
    <a href="#">
        Show Form On Hover
    </a>
    
    <div class="popup popupbottom">
        
        <input type="text" name="email" value="" id="email" placeholder="email"><br />
        <input type="text" name="name" value="" id="name" placeholder="name"><br />
        <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
        <input type="checkbox" name="vehicle" value="Car" /> I have a car<br />
        <input type="submit" name="" value="Submit" id="submit">            
        
    </div>
    
    <div class="clear"></div>
    
</div>

CSS

#helloworld {
    float: left;
    position: relative;
}

#helloworld > a {
    background-color: #f2f4f7;
    display: inline-block;
    line-height: 40px;
    margin-top: 1em;
    padding: 0 20px;
}

.popup {
    position: absolute;
    padding: 20px;
    background-color: yellow;
    border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px;
    margin-top: 7px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); 
}

.popup .popupbottom {
   top: 200%;
    left: 50%;
    margin-left: -60px;
}

.popup::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%; 
    margin-left: -5px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

JavaScript

$('.popup').hide();

$('#helloworld').click(function(e) {
    e.stopPropagation();
    $('.popup.popupbottom').fadeIn(100);
});
$('#helloworld').mouseleave(function(e) {
    e.stopPropagation();
    $('.popup').fadeOut(100);
});