css tooltip without js libraries

<a href="http://www.google.com/" data-title="Hello world! rwerweerwe ">
  Hover over me dfsd sdsdf sdfsdf sd sdf sd s fsdf sd sdf sdf 
</a>

a {
  position: relative;
  display: inline-block;
  margin-top: 40px;
  font-family: 'Segoe UI';
}

a[data-title]:hover::before {
  content: ' ';
  border-color: transparent;
  border-top-color: rgb(0, 0, 0);
  border-width: 5px 5px 0px;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
}

a[data-title]:hover::after {
  content: attr(data-title);
  position: absolute;
  border-radius: 3px;
  bottom: calc(100% + 5px);
  margin: auto;
  color: #fff;
  background-color: #000;
  padding: 4px;
  font-size: 14px;
  width: 200px;
  word-break: normal;
  word-wrap: nowrap;
  left: 50%;
  transform: translateX(-50%);
}