$pageflow-tooltip-bubble-background-color: rgba(0, 0, 0, 0.7) !default;

$pageflow-tooltip-bubble-text-color: #fff !default;

$pageflow-tooltip-clue-border-color: #aaa !default;

.tooltip_bubble {
  display: none;
  position: absolute;
  background-color: $pageflow-tooltip-bubble-background-color;
  color: $pageflow-tooltip-bubble-text-color;
  padding: 5px 10px;
  bottom: 100%;
  margin-bottom: 5px;
  white-space: nowrap;
  border-radius: 2px;
  pointer-events: none;

  &:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 8px;
    @include triangle(10px, $pageflow-tooltip-bubble-background-color, down);
  }
}

:focus,
:hover {
  > .tooltip_bubble {
    display: block;
  }
}

.tooltip_clue {
  position: relative;
  cursor: default;
  border-bottom: dotted 1px $pageflow-tooltip-clue-border-color;
}

[data-tooltip] {
  position: relative;

  &:after {
    position: absolute;
    display: none;
    background-color: $pageflow-tooltip-bubble-background-color;
    color: $pageflow-tooltip-bubble-text-color;
    padding: 5px 10px;
    top: -33px;
    white-space: nowrap;
    border-radius: 2px;
    content: attr(data-tooltip);
    pointer-events: none;
  }

  &:hover:before {
    content: "";
    position: absolute;
    top: -6px;
    left: 8px;
    @include triangle(10px, $pageflow-tooltip-bubble-background-color, down);
  }

  &:hover:after {
    display: block;
  }
}
