Great tooltip that sadly isn't accessible :(

test.html

<p>
  Slow-carb Tumblr High Life biodiesel, stumptown keytar art party mumblecore PBR next level chillwave McSweeney's meh butcher Bushwick.
  Twee try-hard meditation viral, master cleanse butcher pour-over Pitchfork Vice <span data-tooltip="This is a wide tooltip">farm-to-table</span> paleo Portland brunch.
  Ugh plaid lomo YOLO food truck, mustache migas +1 viral health goth tousled. Tofu chambray Portland chillwave chia authentic.
  Typewriter hoodie freegan Intelligentsia fashion axe. <span data-tooltip="Something to say here">Listicle +1 craft beer tattooed mlkshk jean</span> shorts, Banksy ethical selfies Pitchfork Portland irony.
  Tattooed four loko cardigan, ugh cold-pressed heirloom ennui meditation fap literally authentic migas.
</p>

tooltip-not-accessible.css

[data-tooltip] {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border-bottom: 3px solid #b4e7f8;
  -webkit-box-shadow: inset 0 -5px 0 #b4e7f8;
  box-shadow: inset 0 -5px 0 #b4e7f8;
}
[data-tooltip]:before,
[data-tooltip]:after {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  box-sizing: inherit;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
[data-tooltip]:before {
  content: attr(data-tooltip);
  padding: 3px 10px;
  border-radius: 3px;
  background-color: #222;
  color: #FFF;
  white-space: nowrap;
  font-size: 0.778rem
}
[data-tooltip]:after {
  content: "";
  border: 5px solid transparent;
  border-top: 5px solid #222;
  margin-bottom: -10px;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:active:before,
[data-tooltip]:active:after {
  display: block;
}