[tooltip] {
  position: relative;
}

[tooltip]:after {
  content: attr(tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  padding: 0.3em 0.5em;
  background: white;
  border: 1px solid var(--color-grey20);
  width: max-content;
  opacity: 0;
  -webkit-transition: opacity 0.15s ease-in-out;
}

[tooltip]:hover:after {
  opacity: 1;
}

/*
LEFT
 */
[tooltip-rightanchor] {
  position: relative;
}

[tooltip-rightanchor]:after {
  content: attr(tooltip-rightanchor);
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  padding: 0.3em 0.5em;
  background: white;
  border: 1px solid var(--color-grey20);
  width: max-content;
  opacity: 0;
  -webkit-transition: opacity 0.15s ease-in-out;
}

[tooltip-rightanchor]:hover:after {
  opacity: 1;
}


/*
RIGHT
 */
[tooltip-leftanchor] {
  position: relative;
}

[tooltip-leftanchor]:after {
  content: attr(tooltip-leftanchor);
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  padding: 0.3em 0.5em;
  background: white;
  border: 1px solid var(--color-grey20);
  width: max-content;
  opacity: 0;
  -webkit-transition: opacity 0.15s ease-in-out;
}

[tooltip-leftanchor]:hover:after {
  opacity: 1;
}