[data-tooltip]:hover {
   cursor: pointer;
   position: relative;
   z-index: 101;
}

.wpj-tooltip {
   background: $gray-dark;
   border-radius: 3px;
   box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .2);
   color: $white;
   font-size: 12px;
   margin-top: -5px;
   max-width: 700px;
   padding: 11px 22px 10px;
   pointer-events: none;
   position: absolute;
   z-index: 1000;

   &::after {
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid $gray-dark;
      content: "";
      position: absolute;
      left: 50%;
      bottom: -10px;
      margin-left: -10px;
      width: 0;
      height: 0;
   }

   &.top::after {
      border-top: 0;
      border-bottom: 10px solid $gray-dark;
      top: -10px;
      bottom: auto;
   }

   &.left::after {
      left: 10px;
      margin: 0;
   }

   &.right::after {
      right: 10px;
      left: auto;
      margin: 0;
   }

   ul {
      padding-left: 15px;
      margin: 5px 0;
   }
}
