JSFiddle - React, Tailwind, and code Playground

by norsewulf

HTML

<section class="feature-boxes">
  <section class="popup feature-box">
    	<h3 class="size-20">Lorem Ipsum Inceptos Risus Amet Malesuada</h3>

    <p class="speech-bubble shadow">Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio,
      dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus
      sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum
      at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur
      et. Donec id elit non mi porta gravida at eget metus.</p>
  </section>
  <section class="popup feature-box">
    	<h3 class="size-20">Lorem Ipsum Inceptos Risus Amet Malesuada</h3>

    <p class="speech-bubble shadow">Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio,
      dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus
      sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum
      at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur
      et. Donec id elit non mi porta gravida at eget metus.</p>
  </section>
  <section class="popup feature-box">
    	<h3 class="size-20">Lorem Ipsum Inceptos Risus Amet Malesuada</h3>

    <p class="speech-bubble shadow">Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio,
      dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus
      sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum
      at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur
      et. Donec id elit non mi porta gravida at eget metus.</p>
  </section>
  <section class="popup feature-box">
    	<h3 class="size-20">Lorem Ipsum Inceptos Risus Amet Malesuada</h3>

    <p class="speech-bubble shadow">Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio,
      dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus
      sit amet fermentum. Morbi leo risus, porta ac consectetur ac,...

CSS

body {
  background:grey;
}
/*	 Feature Boxes
--------------------------------------------------------------------------------------------*/
 .feature-boxes {
  *zoom: 1;
  margin-bottom: 1.5em;
  position:relative;
  top:250px;
}
.feature-boxes:after {
  content:"";
  display: table;
  clear: both;
}
.feature-boxes .feature-box {
  width: 22.85714%;
  float: left;
  margin-right: 2.85714%;
  -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  position: relative;
  background: white;
}
.feature-boxes .feature-box:last-child {
  float: right;
  margin-right: 0;
}
.feature-boxes .feature-box h3 {
  padding: 20px 0 10px;
  text-align: center;
}
.feature-boxes .feature-box .image {
  padding: 0 20px 20px;
}
.feature-boxes .feature-box .image img {
  width: auto;
  margin: 0 auto;
}
.feature-boxes .speech-bubble {
  -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: none repeat scroll 0 0 #FFFFFF;
  bottom: 100%;
  color: #977D5D;
  display: none;
  font-size: 11px;
  line-height: 1.4em;
  margin: 0 0 27px -10px;
  padding: 20px;
  position: absolute;
  width: 200px;
  z-index: 100;
}
.feature-boxes .speech-bubble:after {
  border-color: #FFFFFF transparent;
  border-style: solid;
  border-width: 14px 14px 0;
  bottom: -14px;
  content:"";
  display: block;
  left: 113px;
  position: absolute;
  width: 0;
}

JavaScript

/* DOM READY FUNCTIONS
	-------------------------------------------------------------- */
$(document).ready(function () {


  /* SPEECH BUBBLE TOOL TIPS
	----------------------------------------------------------------*/

  $.fn.extend({
    popup: function (options) {
      $(this).each(function () {
        var distance = 10;
        var time = 250;
        var hideDelay = 250;
        var hideDelayTimer = null;
        var beingShown = false;
        var shown = false;
        var trigger = $(this);
        

        var popup = $('.speech-bubble', this).css('opacity', 0);
        $([trigger.get(0), popup.get(0)]).mouseover(function () {
          if (hideDelayTimer) clearTimeout(hideDelayTimer);
          if (beingShown || shown) {
            // don't trigger the animation again
            return;
          } else {
              var height = $(this).outerHeight();
            // reset position of popup box
            beingShown = true;
            popup.css({
              bottom: height + 20 + 'px',
              display: 'block'
            }).animate({
              bottom: '-=' + distance + 'px',
              opacity: 1
            }, time, 'swing', function () {
              beingShown = false;
              shown = true;
            });
          }
          return false;
        }).mouseout(function () {
          if (hideDelayTimer) clearTimeout(hideDelayTimer);
          hideDelayTimer = setTimeout(function () {
            hideDelayTimer = null;
            popup.animate({
              bottom: '-=' + distance + 'px',
              opacity: 0
            }, time, 'swing', function () {
              shown = false;
              popup.css('display', 'none');
            });
          }, hideDelay);
          return false;
        });
      });
    }
  });

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


})