Simple Javascript tooltip

by jessekinsman

HTML

<div class="container">
<div class="name" title="Tooltip 2" onmouseover="show()" onmouseout="hide()">
  NAME 2
</div>
<div style="clear:both">
</div>
<div class="name" title="Tooltip 3" onmouseover="show()" onmouseout="hide()">
  NAME 3
</div>
</div>

CSS

.container {
  position: relative;
  overflow: hidden;
  height: 400px;
}
.name {
  float: left;
  border: 1px solid black;
  padding: 1em;
}

.tooltip {
  position: absolute;
  margin: 5px;
  padding: 1em;
  border: 1px solid black;
  background: rgba(0, 0, 0, .75);
  color: #fff;
}

.tooltip:before {
  content: "";
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(0, 0, 0, .75);
  top: -5px;
  position: absolute;
}

JavaScript

function show() {
	var tooltip = document.createElement("SPAN");
  event.target.setAttribute("data-title", event.target.title);
  event.target.removeAttribute("title");
  tooltip.innerHTML = event.target.getAttribute("data-title");
  tooltip.classList.add("tooltip");
  event.target.appendChild(tooltip);
}

function hide() {
  var tooltip = event.target.querySelector(".tooltip");
  event.target.removeChild(tooltip);
  event.target.title = event.target.getAttribute("data-title");
}