JSFiddle - React, Tailwind, and code Playground

by Lorena Brito

HTML

<header>
    <a class="navbar-brand" rel="home">             			            			
	<span class="tooltip tooltip-west"><span class="tooltip-item"><img src="http://a1.dspnimg.com/data/l/395904914221_bpUM7fJj_l.jpg" alt="watermelon whale" width="200px" height="200px"><span class="tooltip-content">Look at all these transformations.</span></span></span>
            		</a> 
		</header>

<div id="parallax-container">
    <div id="history0"><p>Ham</p></div>
    <div id="transformation1"><p>Tam</p></div>
    <div id="today2"><p>Gam</p></div>
    <div id="upcoming3"><p>Lam</p></div>
</div>
    
    <div class="drop" role="banner">
<div class="navbar navbar-inverse" role="navigation">   
				<hr> 
				<div class="container-fluid">
				
					<div class="navbar-header">
           				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              				<span class="sr-only">Toggle navigation</span>
             				<span class="icon-bar"></span>
              				<span class="icon-bar"></span>
              				<span class="icon-bar"></span>
            			</button>
            			
         			</div>
         			
         			<nav role="navigation" class="collapse navbar-collapse" id="main-navbar">
                          							
<ul class="nav navbar-nav no-float" id="parallax-menu"><li class="menu-item"><i class="fa fa-circle fa-lg nav-bullet"></i><a href="javascript:void(0);" id="sec1" onclick="HORILLAX.ANIM.instance.move(0);">History</a></li><li class="menu-item"><i class="fa fa-circle fa-lg nav-bullet"></i><a href="javascript:void(0);" id="sec2" onclick="HORILLAX.ANIM.instance.move(1);">Transformation</a></li><li class="menu-item"><i class="fa fa-circle fa-lg nav-bullet"></i><a href="javascript:void(0);" id="sec3" onclick="HORILLAX.ANIM.instance.move(2);">Today</a></li><li class="menu-item"><i class="fa fa-circle fa-lg nav-bullet"></i><a href="javascript:void(0);" id="sec4"...

CSS

p { color: yellow; }

/* SPEECH BUBBLE */
.tooltip {
	position: absolute;
	z-index: 999;
	cursor: pointer;
	opacity:1;
	-moz-opacity:1;
	-webkit-opacity:1;
	-ms-filter:alpha=1;
}

/* Trigger item */
.tooltip:hover .tooltip-item {
	border-color: #fff;
}


/* Tooltip */
.tooltip-content {
	position: absolute;
	background:#F2F2F2;
	z-index: 9999;
	width: 200px;
	bottom: 50%;
	margin-bottom: -1em;
	padding: 20px;
	border-radius: 20px;
	font-size: 1.1em;
	text-align: center;
	color: #3d3d3d;
	opacity: 0;
	cursor: default;
	pointer-events: none;
	-webkit-font-smoothing: antialiased;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	margin-left:210px;
	font-size:14px;
}

.tooltip-west .tooltip-content {
	left: 4em;
	-webkit-transform-origin: -2em 50%;
	transform-origin: -2em 50%;
	-webkit-transform: translate3d(0,50%,0) rotate3d(1,1,1,30deg);
	transform: translate3d(0,50%,0) rotate3d(1,1,1,30deg);
}

.tooltip-east .tooltip-content {
	right: 4em;
	-webkit-transform-origin: calc(100% + 2em) 50%;
	transform-origin: calc(100% + 2em) 50%;
	-webkit-transform: translate3d(0,50%,0) rotate3d(1,1,1,-30deg);
	transform: translate3d(0,50%,0) rotate3d(1,1,1,-30deg);
}

.tooltip:hover .tooltip-content {
	opacity: 1;
	-webkit-transform: translate3d(0,50%,0) rotate3d(0,0,0,0);
	transform: translate3d(0,50%,0) rotate3d(0,0,0,0);
	pointer-events: auto;
}

/* Gap "bridge" and arrow */

.tooltip-content::before,
.tooltip-content::after {
	content: '';
	position: absolute;
}

.tooltip-content::before {
	height: 100%;
	width: 3em;
}

.tooltip-content::after {
	width: 2em;
	height: 2em;
	top: 50%;
	margin: -1em 0 0;
	background: url(images/tooltip2.svg) no-repeat center center;
	background-size: 100%;
}



.tooltip-west .tooltip-content::before,
.tooltip-west .tooltip-content::after {
	right: 99%; /* because of FF, otherwise we have a gap */
}

/*MAIN NAVIGATION*/
	.drop {
        margin-top:100px;
		
	}
	
	nav li {
		display:inline-block;...

JavaScript

//Original Customization by LB for millworkslb.com

//Tooltip
jQuery('#sec1').click(function(e){
		//alert("History");	
		//console.log(this.id); // This is returning the nav id  = sec3 
		//console.log(jQuery('#parallax-container div').attr('id'));


		//if (jQuery('#parallax-container div').attr('id') == 'history0') {
			if (jQuery('#parallax-container div').attr('id') == 'history0') {
			//Text for History
			jQuery('.tooltip-content').html('A little history on Millworks.');
		} else {
			//Default text
			jQuery('.tooltip-content').html('Welcome to Millworks!');
		}
});

jQuery('#sec2').hover(function(event){
	//alert("Transformation");
	//console.log(this.id); // This is returning the nav id  = sec2 
	//console.log(jQuery('#parallax-container div:nth-of-type(2)').attr('id')); 
	
		
	//if (jQuery('#parallax-container div:nth-of-type(2)').attr('id') == 'transformation1'){ 
	if(jQuery('#parallax-container #transformation1').attr('id') == 'transformation1'){
			//Text for Transformation
			jQuery('.tooltip-content').html('Look at all these transformations.');
	} else {
			//Default text
			jQuery('.tooltip-content').html('Welcome to Millworks!');
	}
});

jQuery('#sec3').hover(function(event){
	//alert("Today");
	//console.log(this.id); // This is returning the nav id  = sec3 
	//console.log(jQuery('#parallax-container div:nth-of-type(3)').attr('id'));
	
	if (jQuery('#parallax-container div:nth-of-type(3)').attr('id') == 'today2'){ 
			//Text for Today
			jQuery('.tooltip-content').html('Welcome to Millworks!');
	} else {
			//Default text
			jQuery('.tooltip-content').html('Welcome to Millworks!');
	}
});

jQuery('#sec4').hover(function(e){
	//alert("Upcoming");
	//console.log(this.id); // This is returning the nav id  = sec3 
	//console.log(jQuery('#parallax-container div:nth-of-type(4)').attr('id'));
	
		if (jQuery('#parallax-container #upcoming3').attr('id') == 'upcoming3'){
			//Text for UPCOMING
			jQuery('.tooltip-content').html('A glimpse into the...