<a class="link" href="http://marcwiethe.de" target="_blank" draggable="false" data-tooltip="Tooltip uses experimental 'width: max-content', look it up on caniuse.com">hover 1.2 seconds</a>

<a href="#" href="http://marcwiethe.de" target="_blank" draggable="false"><abbr data-title="Look, a tooltip!">Hover me, too!</abbr></a>

// BASIC LAYOUT
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
  font-family: 'Open Sans';
  background: #8e9eab;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  
}

// Version 1
.link {
  position: relative;
  padding: 12px 24px;
  color: #fff;
  border: 2px solid #fff;
  transition: all .3s ease;
  text-transform: uppercase;
  text-decoration: none;
  // TOOLTIP BOTTOM TRIANGLE
  &:before {
    content: "";
    position: absolute;
    opacity: 0;
    pointer-events: none;
    left: 50%;
    transform: translate3d(-50%,0%,0);
    transition: all .3s ease;
    transition-delay: 1.2s;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #282828 transparent transparent transparent;
  }
  // TOOLTIP BUBBLE
  &:after {
    text-transform: none;
    content: attr(data-tooltip);
    font-size: 14px;
    position: absolute;
    color: #fff;
    background: #282828;
    padding: 8px 12px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: 200px;
    opacity: 0;
    pointer-events: none;
    left: 50%;
    top: 0;
    border-radius: 4px;
    transform: translate3d(-50%,0%,0);
    transition: all .3s ease;
    transition-delay: 1.2s;
  }
  &:hover {
    background-color: rgba(0,0,0,0.12);
    // TOOLTIP FADEIN AND TRANSLATION
    &:before, &:after {
      opacity: 1;
    }
    &:before {
      transform: translate3d(-50%,calc(-100% - 18px),0);
    }
    &:after {
      transform: translate3d(-50%,calc(-100% - 16px),0);
    }
  } 
}

// Version 2
abbr[data-title] {
  position: relative;
  text-decoration: underline dotted; 
}
abbr[data-title]:hover::after,
abbr[data-title]:focus::after {
  content: attr(data-title);
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  width: auto;
  white-space: nowrap;
  background: #ff0060;
  color: #fff;
  border-radius: 2px;
  box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
  font-size: 14px;
  padding: 3px 5px;
}