Search code examples
htmlcsstooltip

Tooltip with box shadow - microtip

Is it possible to bring the arrowhead in the front of tooltip from the microtip library?, I'm trying to add shadow to the entire tooltip but the head pointing down is on the back, so it gets blocked. Tried adding a background image to after but it's not working correctly.

Here's the code: 

&[aria-label][role="tooltip"] {
  --microtip-font-size: 15px;
  &::after {
    box-shadow: 5px 9px 45px 4px darkgrey;
    border-radius: 7px;
    border: 1px solid darkgrey;
    background-color: white;
    color: #000080;
  }
}


<button type="button" name="button" class='undo' aria-label="Undo" data-microtip-position="top" role="tooltip"></button>
Solution

  • Your tooltip content is in :after and arrow is in :before and :after comes up than :before if no z-index is defined...

    Try to define the z-index of arrow i.e. [aria-label][role~="tooltip"]:before...

    [aria-label][role~="tooltip"]:before {
  z-index: 99;
}