Cacher is the code snippet organizer for pro developers

/** Tooltip Styles **/
  [data-tooltip]
    {
      position: relative;
    }

  [data-tooltip]::before,
  [data-tooltip]::after
    {
      position: absolute;
      display: none;
      opacity: 0.85;
    }

  [data-tooltip]::before
    {
      /*
       * using data-tooltip instead of title so we
       * don't have the real tooltip overlapping
       */
      content: attr(data-tooltip);
      background-color: rgba(0, 0, 0, .9);
      color: #fff;
      font-size: 13px;
      padding: 5px 10px;
      border-radius: 5px;
      /* we don't want the text to wrap */
      white-space: nowrap;
      text-decoration: none;
    }
  [data-tooltip]::after
    {
      width: 0;
      height: 0;
      border: 6px solid transparent;
      content: '';
    }

  [data-tooltip]:hover::before,
  [data-tooltip]:hover::after
    {
      display: block;
    }

/** Positioning **/
  /* left tooltip */
  [data-tooltip][data-placement="left"]::before
    {
      top: -25%;
      right: 100%;
      margin-right: 10px;
    }
  [data-tooltip][data-placement="left"]::after
    {
      border-left-color: rgba(0, 0, 0, .9);
      border-right: none;
      top: 50%;
      right: 100%;
      margin-top: -6px;
      margin-right: 4px;
    }

  /* right tooltip */
  [data-tooltip][data-placement="right"]::before
    {
      top: -25%;
      left: 100%;
      margin-left: 10px;
    }
  [data-tooltip][data-placement="right"]::after
    {
      border-right-color: rgba(0, 0, 0, .9);
      border-left: none;
      top: 50%;
      left: 100%;
      margin-top: -6px;
      margin-left: 4px;
    }

  /* top tooltip */
  [data-tooltip][data-placement="top"]::before
    {
      bottom: 100%;
      left: 0;
      margin-bottom: 10px;
    }
  [data-tooltip][data-placement="top"]::after
    {
      border-top-color: rgba(0, 0, 0, .9);
      border-bottom: none;
      bottom: 100%;
      left: 10px;
      margin-bottom: 4px;
    }

  /* bottom tooltip */
  [data-tooltip][data-placement="bottom"]::before
    {
      top: 100%;
      left: 0;
      margin-top: 10px;
    }
  [data-tooltip][data-placement="bottom"]::after
    {
      border-bottom-color: rgba(0, 0, 0, .9);
      border-top: none;
      top: 100%;
      left: 10px;
      margin-top: 4px;
    }