Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                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}

              
            
!

JS

              
                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';
		});
	}
});
              
            
!
999px

Console