JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <h1 class="tooltip" title="asdad">Pure CSS Tooltip</h1>
  <p><span class="tooltip" title="I'm a Tooltip">Lorem ipsum dolor sit amet</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestiae, quis accusamus fugiat officiis amet ullam, inventore vero! Officia iusto totam quis amet consequatur numquam nesciunt alias deleniti eos quas?<span class="tooltip" title="Another Tooltip">
  Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit. Beatae ut nihil labore at reiciendis placeat modi, Lorem ipsum dolor sit ameteum quia delectus similique accusamus sed soluta sunt aliquid repudiandae assumenda a illo molestiae.
    <span class="tooltip" title="One more Tooltip">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit. Deserunt incidunt et earum repellendus, maxime neque voluptate molestias quod at illo maiores tempora suscipit, deleniti ipsum nesciunt, animi tempore, esse cum?
  </p>
</div>

CSS

* {
  box-sizing: border-box;
}

.tooltip {
  position: relative;
  border-bottom: 1px dotted #ccc;
  cursor: help;
}

:before, :after {
  visibility: hidden;
}

:before {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -6px;
  content: '\00a0';
  height: 0;
  width: 0;
  border-bottom: 6px solid #363636;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

:after {
  position: absolute;
  content: attr(title);
  top: 100%;
  left: -12px;
  width: 100%;
  min-width: 120px;
  margin: 0;
  padding: 8px 10px;
  background: #363636;
  color: #fff;
  font-size: 1.2rem;
  font-weight: normal;
  text-align: center;
}

:hover:after, :hover:before {
  visibility: visible;
}

:hover:before {
  bottom: -6px;
}

:hover:after {
  margin-top: 6px;
}

html {
  font-size: 62.25%;
}

body {
  font-size: 1.6rem;
}

h1 {
  font-size: 2.4rem;
}

.wrapper {
  max-width: 32em;
  padding: 12px;
  margin: 0 auto;
  font-family: sans-serif;
  line-height: 1.4;
}