.tooltip{
  position: relative;
  &-parent{
    @extend %tooltip-parent;
  }
  &-left{
    @extend %tooltip-left;
  }
  &-bottom{
    @extend %tooltip-bottom;
  }
  &-content {
    @extend %tooltip-content;
    z-index: z($z-priority, tooltip);
    display: none;
    left: 120%;
    left: calc(100% + #{$box-padding});
    font-weight: normal !important;
    text-transform: lowercase !important;
    font-size: .6rem !important;
    font-style: normal;
    &::first-letter {
      text-transform: uppercase !important;
    }

    #easy_servicebar &, #sidebar &, #easy_grid_sidebar &, .easy-query-additional-ending-buttons &{
      left: auto;
      right: 120%;
      right: calc(100% + #{$box-padding});
    }

    .attribute{
      left: 0;
      top: calc(100% + #{$gap});
    }
  }
  &[data-title] {
    &:hover {
      & > .tooltip-content {
        display: inline-block;
      }
    }
  }
}