<!--

Forum question answer only:

https://www.sitepoint.com/community/t/een-pop-up-bij-een-muisover-altijd-net-naast-de-betreffende-link-laten-verschijnen/470115

-->
<p>
  Ten teken, dat wij ook voor absolute beginners toegankelijk
  willen zijn, vermijden wij jargon en wordt gepoogd om voortdurend
  Nederlands te gebruiken waar dat mogelijk en redelijk is, want
  wat mankeert er aan onze
  <a class="keywordppup ppup" id="k1">
    moerstaal <span>
      Dit is de 'pop up' -tekst.
    </span>
  </a>
</p>

<p>? Waar het gebruik van Nederlandse begrippen niet voor de hand ligt (zoals bij 'browser') of niet mogelijk is, zijn die begrippen tussen enkele aanhalingstekens geplaatst.
</p>

.ppup {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #ccc;
  font-weight: bold;
}

.ppup:hover {
  text-decoration: none;
  z-index: 6;
}
.ppup span {
  position: absolute;
  opacity: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
  transition: 0.3s ease;
  border-radius: 0.5em;
  border: 1px solid #28477a;
  padding: 0.2em 0.5em 0.3em 0.5em;
  width: max-content; /* or set a fixed width*/
  max-width: 200px;
  margin: 20px 0 0;
  text-align: center;
}
.ppup:hover span {
  opacity: 1;
  pointer-events: initial;
  background: #ffffcc;
  z-index: 99;
}