<div id='tooltipWrapper' class='absoluteCenter'>
  <div class="asteriks" title="Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей.<br /><hr /><br /><span style='color:red'>Текст генерируется</span> абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.">
      <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">        <use xlink:href="#question" id="question-1" />
    </svg>
  </div>
  <div class="asteriks" title="Вторая подсказка">
    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">        <use xlink:href="#question" id="question-2" />
    </svg>
  </div>
</div>
<svg style="display: none">
    <symbol id="question" viewBox="0 0 512 512">
      <path d="m256 0c-141.164062 0-256 114.835938-256 256s114.835938 256 256 256 256-114.835938 256-256-114.835938-256-256-256zm0 405.332031c-11.777344 0-21.332031-9.554687-21.332031-21.332031s9.554687-21.332031 21.332031-21.332031 21.332031 9.554687 21.332031 21.332031-9.554687 21.332031-21.332031 21.332031zm33.769531-135.636719c-7.550781 3.476563-12.4375 11.09375-12.4375 19.394532v9.578125c0 11.773437-9.535156 21.332031-21.332031 21.332031s-21.332031-9.558594-21.332031-21.332031v-9.578125c0-24.898438 14.632812-47.722656 37.226562-58.15625 21.738281-10.003906 37.4375-36.566406 37.4375-49.601563 0-29.394531-23.914062-53.332031-53.332031-53.332031s-53.332031 23.9375-53.332031 53.332031c0 11.777344-9.539063 21.335938-21.335938 21.335938s-21.332031-9.558594-21.332031-21.335938c0-52.925781 43.070312-96 96-96s96 43.074219 96 96c0 28.824219-25.003906 71.191407-62.230469 88.363281zm0 0"/>
    </symbol>
</svg>
body {width:100%;height:100vh;background-color:#f6f6f6;font-family:Helvetica,sans-serif;}

#tooltipWrapper svg{width: 16px;height:16px;}

#tooltipWrapper {
height: 100%;
display: flex;
justify-content: center; /*Центрирование по горизонтали*/
align-items: center;     /*Центрирование по вертикали */
}

.asteriks{width: 20px;height: 20px;}

.nTip {display:none;position:absolute;background-color:#2d2d2d;padding:15px;color:#fff;max-width:400px;min-width:20px;z-index:99999;font-size: 12px;}

.red {color:#ff0000}

function fadeIn(el) {
  let opacity = 0.01,
    fadeEl = el;

  if(fadeEl){
    fadeEl.style.opacity = opacity;
    fadeEl.style.display = "block";
    var timer = setInterval(function() {
      if(opacity >= 1) {
        clearInterval(timer);
      }
      fadeEl.style.opacity = opacity;
      opacity += opacity * 0.1;
    }, 5);
  }
}

function fadeOut(el) {
  let opacity = 1,
    fadeOutEl = el;

  if(fadeOutEl){
    fadeOutEl.style.display = "block";

    var timer = setInterval(function() {
      if(opacity <= 0.01) {
        clearInterval(timer);
        fadeOutEl.style.display = "none";
      }
      fadeOutEl.style.opacity = opacity;
      opacity -= opacity * 0.1;
    }, 5);
  }
}

function isHidden(el) {
  return (el.offsetParent === null)
}

Element.prototype.remove = function() {
  this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
  for(var i = this.length - 1; i >= 0; i--) {
    if(this[i] && this[i].parentElement) {
      this[i].parentElement.removeChild(this[i]);
    }
  }
}


document.addEventListener("DOMContentLoaded", () => {
  let asteriks = document.querySelectorAll('.asteriks');

  for (let i = 0; i < asteriks.length; i++){

    asteriks[i].addEventListener("mouseenter", (e) => {
      var el = asteriks[i],
        title = el.getAttribute('title');

      el.setAttribute('tipText',title);
      el.removeAttribute('title');

      var newDiv = document.createElement("div");

      newDiv.className = "nTip";
      newDiv.innerHTML = title;
      newDiv.style.top = e.pageY + 10 + 'px';
      newDiv.style.left = e.pageX + 20 + 'px';

      document.body.appendChild(newDiv);
      fadeIn(newDiv);
    });

    asteriks[i].addEventListener("mouseleave", (e) => {
      var el = asteriks[i];
      el.setAttribute('title',el.getAttribute('tipText'));
      document.querySelector('.nTip').remove();
    });

    asteriks[i].addEventListener("mousemove", (e) => {
      var tip = document.querySelector('.nTip');
      tip.style.top = e.pageY + 10 + 'px';
      tip.style.left = e.pageX + 20 + 'px';
    });
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-3.4.1.min.js