JSFiddle - React, Tailwind, and code Playground

by skeller88

HTML

<!-- TOOLTIPS -->
<div class="arrow-container">
    <div class="arrow-left"></div>
</div>

<div class="tt-container">
  <div class="info">?</div>
  <div class="field-tt">Does your application run in a Web Browser or is it a Desktop application? Choosing Desktop will set up the Out of Band (PIN-based) OAuth workflow for your application.</div>
</div>

<div class="tt-container">
  <div class="info">?</div>
  <div class="field-tt">Where is your application's home page, where users can go to download or use it?</div>
</div>

<div class="tt-container">
  <div class="info">?</div>
  <div class="field-tt">Where should we return to after successful authorization?</div>
</div>

<div class="tt-container">
  <div class="info">?</div>
  <div class="field-tt">What type of access does your application need? Note that changing access type from "Read" to "Read & Write" or vice versa at a later time will revoke all existing access tokens and all subscriptions.</div>
</div>

CSS

/* can't be named "tooltip" because YUI javascript targets .tooltip */
.field-tt {
  background-color: white;
  border: 2px solid #b1b6bb;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .5);
  left: 30px;
  padding: 20px;
  position: absolute;
  top: -40px;
  visibility: hidden;
  z-index: 30;
}

.tt-1 {
  /* change to hidden when done styling */
  visibility: visible;
}

.field-tt::after, .field-tt::before {
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  border-right: 2px solid #b1b6bb;
  content: '';
  height: 0;
  position: absolute;
  right: 100%;
  top: 50%;
  width: 0;
}

/* tooltip arrow border */
.field-tt::before {
  /* should match tooltip border */
  border-right-color: #b1b6bb;
  border-width: 13px;
  margin-top: -13px;
}

/* tooltip arrow */
.field-tt::after {
  /* should match tooltip background */
  border-right-color: white;
  border-width: 10px;
  margin-top: -10px;
}

.info {
  background-color: lightblue;
  display: inline-block;
}

.tt-container {
  position: relative;
    float: left;
  margin: 20px;
}

.tt-container:hover .field-tt {
  visibility: visible;
}