Styling the aria-label attribute to act like a popover

Github Page

A quick and dirty demonstration showing how to display the aria-label information of a button on hover or when the element receives focus.

Examples

Code

Markup

<button
  type="bubtton"
  aria-label="Close and return to Bank Balance information"
>
  X
</button>

CSS

button {
  position: relative;
}

button[aria-label]:focus:after,
button[aria-label]:hover:after {
  position: absolute;
  z-index: 1;
  top: -2em;
  left: 0;
  display: block;
  overflow: hidden;
  width: 17em;
  height: 2em;
  border-radius: .2em;
  padding: 0 .7em;
  content: attr(aria-label);
  color: #fff;
  background: #000;
  font-size: 1em;
  line-height: 2em;
  text-align: left;
}

Github Page