MaxMilton/ekscss

/**
* XCSS Addon: Tooltip
*
* TODO: Write short overview.
*
* EXAMPLE:
*
*   <span aria-label="I'm a tooltip!" data-tooltip>hover me</span>
*/

[data-tooltip][aria-label] {
  position: relative;

  &::before,
  &::after {
    position: absolute;
    z-index: 1;
    right: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translateX(50%);
    transition: opacity ${x.tooltip.animateSpeed} ${x.tooltip.animateTiming};
    // visibility: hidden;
  }

  &::before {
    bottom: calc(0.5rem + 100%);
    width: max-content;
    max-width: ${x.tooltip.widthMax};
    height: fit-content;
    padding: ${x.tooltip.paddingY} ${x.tooltip.paddingX};
    color: ${x.tooltip.color};
    font-size: ${x.tooltip.textSize};
    font-weight: ${x.tooltip.textWeight};
    text-align: center;
    white-space: pre-line; // support \n
    hyphens: manual; // don't break words in awkward places
    background: ${x.tooltip.backgroundColor};
    content: attr(aria-label);
  }

  &::after {
    bottom: 100%;
    // width: 0;
    // height: 0;
    border: solid;
    border-width: 0.5rem 0.5rem 0;
    border-color: ${x.tooltip.backgroundColor} transparent;
    content: '';
  }

  &:hover::before,
  &:hover::after {
    opacity: 1;
    // visibility: visible;
  }
}