Our tooltip is currently just a box. In many UI design systems, this is all tooltips need, but others prefer to have an arrow that points toward the reference element.
Add an arrow element with a data-popper-arrow
attribute like so:
<div id="tooltip" role="tooltip">
My tooltip
<div id="arrow" data-popper-arrow></div>
</div>
Now for styling :
#arrow,
#arrow::before {
position: absolute;
width: 8px;
height: 8px;
background: inherit;
}
#arrow {
visibility: hidden;
}
#arrow::before {
visibility: visible;
content: '';
transform: rotate(45deg);
}
The ::before
pseudo-element is required because Popper uses transform
to position the arrow inside the popper, but we want to use our own transform
to rotate the arrow box into a diamond.
Now we need to offset the arrow depending on the popper's current placement. Popper provides this information with the data-popper-placement
attribute :
#tooltip[data-popper-placement^='top'] > #arrow {
bottom: -4px;
}
#tooltip[data-popper-placement^='bottom'] > #arrow {
top: -4px;
}
#tooltip[data-popper-placement^='left'] > #arrow {
right: -4px;
}
#tooltip[data-popper-placement^='right'] > #arrow {
left: -4px;
}
Note : Why the
^=?
This means "starts with", because we can also have variation placements like
top-start
.
Output :