<main>
  <p class="text">
    Hover for a surprise
    <span class="tooltip">Surprise! I'm a tooltip</span>
  </p>
</main>

.text {
  position: relative;
}

.tooltip {
  position: absolute;
  display: none;

  /* vertical center */
  top: 50%;
  transform: translateY(-50%);

  /* move to the left */
  right: 100%;
  margin-right: 15px; */
}

.text:hover .tooltip {
  display: block;
}


/* Aesthetic changes */

* {
  padding: 0px;
  margin: 0px;
}

html {
  font-family: Helvetica, sans-serif;
}

body {
  background-color: #cdb4db;
}

main {
  display: grid;
  place-items: center;

  height: 100vh;

  font-weight: 600;
}

.text {
  border-bottom: 2px dashed #000;
}

.tooltip {
  width: 200px;
  padding: 10px;
  border-radius: 10px;
  background: #2b2d42;
  color: #fff;
  text-align: center;
}