tooltip на html и css

[groc]

Здравствуйте.

Подскажите как мне разметить по середине подсказку?

Есть подсказка и под ней типо что то стрелки так не понимаю как установить эту стрелку по середине относительно картинки ссылки и так же по середине самой подсказки

<a id="test" data-position="top" data-tooltip="test"><img src="https://www.iapps4you.com/images/apps/242/242709/logo.jpg" width="64" height="64"></a>

<a id="test" data-position="top" data-tooltip="test test test test"><img src="https://www.iapps4you.com/images/apps/242/242709/logo.jpg" width="64" height="64"></a>

a[data-tooltip] {
  position: relative;
}
a[data-tooltip]:after, a[data-tooltip]:before {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 99;
}
a[data-tooltip]:before {
  content: attr(data-tooltip);
  background: #000;
  color: #a1b874;
  border:1px solid #748c46;
  font-size: 10px;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 5px;
  white-space: nowrap;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}
a[data-tooltip]:after {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  content: '';
}
a[data-tooltip]:hover:after, a[data-tooltip]:hover:before {
  visibility: visible;
  opacity: 0.85;
  transform: translateY(0px);
}

a[data-tooltip][data-position="top"]:before {
  bottom: 100%;
  left: 0;
  margin-bottom: 10px;
}

a[data-tooltip][data-position="top"]:after {
  border-top-color: #748c46;
  border-bottom: none;
  bottom: 101%;
    left: 50%;
  margin-bottom: 4px;
}

Вот ссылка на пример