JSFiddle - React, Tailwind, and code Playground
HTML
<div id="out-section">
<div class="why-out" id="out-head">WHAT'S OUT</div>
<br/>
<div class="why-out" id="gluten">Gluten/Grain /OUT</div>
<br>
<div class="why-out" id="dairy">Dairy /OUT </div>
<br>
<div class="why-out" id="soy">Soy /OUT </div>
<div class="why-out" id="gmo">GMO's /OUT </div>
<div class="why-out" id="preservatives">Preservatives /OUT </div>
<div class="why-out" id="fillers">Fillers /OUT </div>
<div class="why-out" id="sugars">Refined Sugars /OUT </div>
</div>
<div class="why-out hide" id="why-out-pop">
<p>This is a test</p>
</div>
CSS
.hide {
visibility: hidden;
}
#why-out-pop {
position: absolute;
margin-top: -158px;
margin-left: 30px;
border-style: solid;
border-width: 3px;
border-radius: 40px;
border-color: black;
background-color: #c3c3c3;
padding: 10px;
color: black;
text-align: right;
font-weight: light;
z-index: 1000;
}
.why-out {
text-align: right;
font-weight: bold;
}
#out-head {
text-align: right;
font-weight: bold;
}
</style>
JavaScript
$( document ).ready(function(){
var buildHtml = function(id) {
console.log(id);
var html;
switch (id) {
case 'gluten':
html = '<p>This is why gluten sucks</p>';
case 'dairy':
html = '<p>This is why dairy sucks<p>';
case 'soy':
html = '<p>This is why soy sucks<p>';
case 'gmo':
html = '<p>This is why gmo sucks<p>';
case 'preservatives':
html = '<p>This is why preservatives suck<p>';
case 'fillers':
html = '<p>This is why fillers suck<p>';
case 'sugars':
html = '<p>This is why sugars suck<p>';
}
return html;
};
$( ".why-out" ).hover(
function() {
console.log(this);
var html = buildHtml(this.id);
$('#why-out-pop').html('');
//console.log(html);
$('#why-out-pop').append(html).removeClass('hide');
}, function() {
$('#why-out-pop').html('').addClass('hide');
}
);
});