JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="tooltip">
  <div class="icon">
    <i class='material-icons' role="presentation">help_outline</i> 
  </div>

  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam architecto quae deleniti laborum illum dicta id perferendis reiciendis numquam pariatur!</div>
</div>

SCSS

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  padding: 2rem;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.tooltip {
  position: relative;
  
  &:hover {
    > .icon {
      color: darken(#868686, 10%);
    }

    > .content {
      display: block;
    }
  }

  > .content {
    display: none;
    position: absolute;
    background: #fff;
    right: -3px;
    margin-top: 8px;
    min-width: 300px;
    padding: 16px;
    border: 1px solid #CECECE;
    border-radius: 3px;
    font-size: 14px;
    color: #2b2b2b;
    line-height: 1.5;
    
    &::after {
      content: '';
      width: 12px;
      height: 12px;
      position: absolute;
      right: 8px;
      top: -7px;
      background: #fff;
      border: 1px solid #CECECE;
      transform: rotate(-45deg);
      border-radius: 3px;
      clip-path: polygon(0 0, 100% 0, 100% 100%);
    }
  }

  > .icon {
    color: #868686;
    
    &:hover {
      color: darken(#868686, 10%);
    }
  }
}