popper js example

1<div id="tooltip" role="tooltip">
2  My tooltip
3  <div id="arrow" data-popper-arrow></div>
4</div>

1#arrow,
2#arrow::before {
3  position: absolute;
4  width: 8px;
5  height: 8px;
6  z-index: -1;
7}
8
9#arrow::before {
10  content: '';
11  transform: rotate(45deg);
12  background: #333;
13}

1#tooltip[data-popper-placement^='top'] > #arrow {
2  bottom: -4px;
3}
4
5#tooltip[data-popper-placement^='bottom'] > #arrow {
6  top: -4px;
7}
8
9#tooltip[data-popper-placement^='left'] > #arrow {
10  right: -4px;
11}
12
13#tooltip[data-popper-placement^='right'] > #arrow {
14  left: -4px;
15}