.intext{display:inline-block;}

.tooltip, .tooltip * { box-sizing: border-box }

.tooltip{
  --bbColor: #1b91ff;
  color: white;
  --bbArrowSize: 1.5rem;
  --bbBorderRadius: 0.25rem;
  --bbPadding: 1rem;
  background: var(--bbColor);
  border-radius: var(--bbBorderRadius);
  padding: var(--bbPadding);
  position: relative;
}

.tooltip::before{
  content: ''; 
  position: absolute;
  background: var(--bbColor);
}

.tooltip.pbottom{ margin-bottom: var(--bbArrowSize) }
.tooltip.ptop   { margin-top: var(--bbArrowSize); }
.tooltip.pleft  { margin-left: var(--bbArrowSize); }
.tooltip.pright { margin-right: var(--bbArrowSize); }


/* bottom and top  */
.tooltip.pbottom::before,
.tooltip.ptop::before{
  --width: calc(var(--bbArrowSize) / 2 * 3);
  height: var(--bbArrowSize);
  width: var(--width);
}

/* bottom */
.tooltip.pbottom::before{
  top: calc(100% - 2px);
}
.tooltip.pbottom.aleft::before{
  left: 1rem;
  clip-path: polygon(25% 0, 100% 0, 0% 100%)
}
.tooltip.pbottom.acenter::before{
  left: calc(50% - var(--width) / 2);
  clip-path: polygon(12.5% 0, 87.5% 0, 50% 100%)
}
.tooltip.pbottom.aright::before{
  right: 1rem;
  clip-path: polygon(0 0, 75% 0, 100% 100%)
}

/* top */
.tooltip.ptop::before{
  bottom: calc(100% - 2px);
}
.tooltip.ptop.aleft::before{
  left: var(--bbPadding);
  clip-path: polygon(0 0, 100% 100%, 25% 100%)
}
.tooltip.ptop.acenter::before{
  left: calc(50% - var(--width) / 2);
  clip-path: polygon(12.5% 100%, 50% 0, 87.5% 100%)
}
.tooltip.ptop.aright::before{
  right: var(--bbPadding);
  clip-path: polygon(0 100%, 100% 0, 75% 100%)
}

/* left and right  */
.tooltip.pleft::before,
.tooltip.pright::before{
  --height: calc(var(--bbArrowSize) / 2 * 3);
  width: var(--bbArrowSize);
  height: var(--height);
}

/* right */
.tooltip.pright::before{
  left: calc(100% - 2px);
}
.tooltip.pright.atop::before{
  top: var(--bbPadding);
  clip-path: polygon(100% 0, 0 100%, 0 25%)
}
.tooltip.pright.acenter::before{
  top: calc(50% - var(--height) / 2);
  clip-path: polygon(0 12.5%, 100% 50%, 0 87.5%)
}
.tooltip.pright.abottom::before{
  bottom: var(--bbPadding);
  clip-path: polygon(0 0, 100% 100%, 0 75%)
}

/* left */
.tooltip.pleft::before{
  right: calc(100% - 2px);
}
.tooltip.pleft.atop::before{
  top: var(--bbPadding);
  clip-path: polygon(0 0, 100% 25%, 100% 100%)
}

.tooltip.pleft.acenter::before{
  top: calc(50% - var(--height) / 2);
  clip-path: polygon(0 50%, 100% 12.5%, 100% 87.5%);
}
.tooltip.pleft.abottom::before{
  bottom: var(--bbPadding);
  clip-path: polygon(0 100%, 100% 0, 100% 75%)
}

/* flip */
.tooltip.pbottom.flip::before,
.tooltip.ptop.flip::before{
  transform: scaleX(-1)
}
.tooltip.pleft.flip::before,
.tooltip.pright.flip::before{
  transform: scaleY(-1)
}