Керований, доступний тултіп без JS (підходить для будь-якого тексту)

Вставте у статтю цей CSS (можете на початку статті у style)

<style>
  .tip-wrap { position: relative; display: inline-block; }
  .tip-target { cursor: help; }
  .tip-bubble {
    position: absolute; left: 0; top: 100%; margin-top: .4rem;
    background: #fff; color: #0f172a; /* слонова кістка/чорнило */
    border: 1px solid rgb(44, 96, 139);
    border-radius: .5rem; padding: .5rem .6rem; line-height: 1.25;
    font-size: .875rem; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.12);
    opacity: 0; transform: translateY(4px); pointer-events: none; transition: .15s;
    z-index: 20;
  }
  .tip-wrap .tip-arrow {
    position: absolute; left: 10px; top: -6px; width: 10px; height: 10px;
    background: #fff; border-left: 1px solid rgb(44, 96, 139); border-top: 1px solid rgb(44, 96, 139);
    transform: rotate(45deg);
  }
  /* показуємо бульбашку на :hover і на :focus (клавіатура) */
  .tip-target:hover + .tip-bubble,
  .tip-target:focus + .tip-bubble { opacity: 1; transform: translateY(0); pointer-events: auto; }

  /* допоміжний стиль для видимого фокуса */
  .tip-target:focus { outline: 2px solid rgb(44, 96, 139); outline-offset: 2px; border-radius: .25rem; }
</style>

І далі в місці, де потрібна підказка:

<span class="tip-wrap">
  <span class="tip-target" tabindex="0" aria-describedby="t1">цей фрагмент тексту</span>
  <span id="t1" role="tooltip" class="tip-bubble" aria-hidden="false">
    <span class="tip-arrow" aria-hidden="true"></span>
    Пояснювальний текст підказки
  </span>
</span>