tooltip triangle on the top of an element in css

css triangle tooltip

#element:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 16px solid #fff;
  top: -15px;
  left: 27px;
  z-index: 5;
}

#element:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 16px solid #bbb;
  top: -16px;
  left: 27px;
}