.tooltip{
  --tooltip-offset:calc(100% + 1px + var(--tooltip-tail,0px));
  text-align:center;
  --tooltip-tail:5px;
  --tooltip-color:#D95980;
  --tooltip-text-color:#fff;
  --tooltip-tail-offset:calc(100% + 1px - var(--tooltip-tail));
  display:inline-block;
  position:relative;
}
.tooltip:before{
  pointer-events:none;
  content:attr(data-tip);
  top:auto;
  left:5%;
  right:var(--tooltip-tail-offset);
  bottom:var(--tooltip-offset);
  max-width:20rem;
  background-color:#D95980;
  color:#fff;
  width:max-content;
  border-radius:.25rem;
  padding:.25rem .5rem;
  font-size:.875rem;
  line-height:1.25rem;
  position:absolute;
  
}
.tooltip-bottom:before{
	top:var(--tooltip-offset);
	bottom:auto;
	left:50%;
	right:auto;
	transform:translate(-50%);
}

.tooltip-left:before{
	top:50%;
	left:auto;
	right:var(--tooltip-offset);
	bottom:auto;
	transform:translateY(-50%);
}

.tooltip-right:before{
	top:50%;
	left:var(--tooltip-offset);
	bottom:auto;
	right:auto;
	transform:translateY(-50%);
}

.tooltip:before, .tooltip:after{
  opacity:0;
  transition-duration:.2s;
  transition-delay:.1s;transition-timing-function:cubic-bezier(.4,0,.2,1);
}

.tooltip:after {
  content:"";
  border-style:solid;
  border-width:var(--tooltip-tail,0);
  width:0;
  height:0;
  border-color:var(--tooltip-color)transparent transparent transparent;
  top:auto;
  left:50%;
  right:50%;
  bottom:var(--tooltip-tail-offset);
  display:block;
  position:absolute;
  transform:translate(-50%);
}
.tooltip.tooltip-open:before,.tooltip.tooltip-open:after,.tooltip:hover:before,.tooltip:hover:after{
  opacity:1;
  transition-delay:75ms;
}