Tooltip Workshop #1

by godfrzero

HTML

<div>v0.0.22</div>
<div class="anchor">Hover on me ^_^</div>
<div>Don't hover on me ^_^</div>
<div class="tooltip">Some information</div>
<div>Don't hover on me ^_^</div>
<div>Don't hover on me ^_^</div>
<div class="anchor">Don't hover on me ^_^</div>
<div class="tooltip">Some other information</div>
<div>Don't hover on me ^_^</div>
<div>Don't hover on me ^_^</div>
<div>Don't hover on me ^_^</div>

CSS

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

.tooltip {
  display: none;
  border: solid thin black;
  background: cyan;
  position: absolute;
  padding: 6px;
}

.tooltip:before {
  content: ' ';
  position: absolute;
  top: -20px;
  left: calc(50% - 10px);
  border: solid 10px transparent;
  border-bottom-color: black;
}

JavaScript

let $anchor = document.getElementsByClassName('anchor')[0];
let $tooltip = document.getElementsByClassName('tooltip')[0];

$anchor.addEventListener('mouseenter', function () {
	$tooltip.style.display = 'block';
});

$anchor.addEventListener('mouseout', function () {
	$tooltip.style.display = 'none';
});