:host {
  position: relative;
  display: -webkit-box;
  display: flex;
}

.tooltip {
  position: absolute;
  left: 50%;
  display: none;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 10em;
  padding: 0.5em;
  color: var(--manifold-grayscale-100i);
  text-align: center;
  background: var(--manifold-grayscale-100);
  border-radius: var(--manifold-radius);
  -webkit-transform: translate(-50%, calc(-100% - 0.25em));
          transform: translate(-50%, calc(-100% - 0.25em))
}

.tooltip::before {
    position: absolute;
    bottom: -0.375em;
    left: calc(50% - 0.375em);
    display: block;
    width: 0.75em;
    height: 0.75em;
    background: inherit;
    border-top-left-radius: 100%;
    border-bottom-right-radius: 3px;
    -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
    content: '';
  }

slot:hover + .tooltip,
slot:focus + .tooltip {
  display: block;
}