<html>
  <body>
    <div class="container">
      <div class="label">
        <span class="tooltip-toggle" aria-label="Sample text for your tooltip!" tabindex="0">
          <svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg"><g fill="#ED3E44" fill-rule="evenodd"><path d="M13.5 27C20.956 27 27 20.956 27 13.5S20.956 0 13.5 0 0 6.044 0 13.5 6.044 27 13.5 27zm0-2C7.15 25 2 19.85 2 13.5S7.15 2 13.5 2 25 7.15 25 13.5 19.85 25 13.5 25z"/><path d="M12.05 7.64c0-.228.04-.423.12-.585.077-.163.185-.295.32-.397.138-.102.298-.177.48-.227.184-.048.383-.073.598-.073.203 0 .398.025.584.074.186.05.35.126.488.228.14.102.252.234.336.397.084.162.127.357.127.584 0 .22-.043.412-.127.574-.084.163-.196.297-.336.4-.14.106-.302.185-.488.237-.186.053-.38.08-.584.08-.215 0-.414-.027-.597-.08-.182-.05-.342-.13-.48-.235-.135-.104-.243-.238-.32-.4-.08-.163-.12-.355-.12-.576zm-1.02 11.517c.134 0 .275-.013.424-.04.148-.025.284-.08.41-.16.124-.082.23-.198.313-.35.085-.15.127-.354.127-.61v-5.423c0-.238-.042-.43-.127-.57-.084-.144-.19-.254-.318-.332-.13-.08-.267-.13-.415-.153-.148-.024-.286-.036-.414-.036h-.21v-.95h4.195v7.463c0 .256.043.46.127.61.084.152.19.268.314.35.125.08.263.135.414.16.15.027.29.04.418.04h.21v.95H10.82v-.95h.21z"/></g></svg>
        </span>
        <span class="label-text">Hover over the "i"!</span>
      </div>
    </div>
  </body>
</html>
//Setting up the pen
html,
body {
  background-color: #363642;
  color: #2D2D36;
  padding: 4rem;
}

.container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgba(153,153,153,0.35);
  padding: 1em;
  border: 1px solid #eee;
  display: block;
  width: 200px;
  margin: 0 auto;
}

.label {
  display: flex;
  align-items: center;
  justify-content: center;
}

.label-text {
  margin-left: 0.5em;
}

//The good stuff
.tooltip-toggle {
  cursor: pointer;
  position: relative;

  svg {
    height: 18px;
    width: 18px;
  }
  
  //Tooltip text container
  &::before {
    position: absolute;
    top: -80px;
    left: -80px;
    background-color: #2B222A;
    border-radius: 5px;
    color: #fff;
    content: attr(aria-label); //This pulls in the text from the element with the tooltip
    padding: 1rem;
    text-transform: none;
    transition: all 0.5s ease;
    width: 160px;
  }

  //Tooltip arrow
  &::after {
    position: absolute;
    top: -12px;
    left: 9px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2B222A;
    content: " ";
    font-size: 0;
    line-height: 0;
    margin-left: -5px;
    width: 0;
  }
  
  //Setting up the transition
  &::before,
  &::after {
    color: #efefef;
    font-family: monospace;
    font-size: 16px;
    opacity: 0;
    pointer-events: none;
    text-align: center;
  }
  
  //Triggering the transition
  &:focus::before,
  &:focus::after,
  &:hover::before,
  &:hover::after {
    opacity: 1;
    transition: all 0.75s ease;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.