add modern tooltips

[KyleMit]

Especially for <abbr title="Vermont Department of Health">VDH</abbr> elements with title attribute.

Here are but biggest driver is going to be perf/bundle size. We don't need a lot of features

• 21 best open-source tooltip plugins made with CSS, jQuery, and JavaScript
• 28 CSS Tooltips
• Plain Javascript Tooltip
• Add a tooltip to a div

CSS

microtip - 1.2 KB

<button aria-label="Hey tooltip!" data-microtip-position="up" role="tooltip">

wenk - 0.7 KB

<span data-wenk="I'm to the right!" data-wenk-pos="right">Wenk to the right!</span>

W3 Schools - 0.3 KB

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

Custom

<abbr data-tooltip="Vermont Department of Health">VDH</abbr> / 

*[data-tooltip] {
  position: relative;
}

*[data-tooltip]::after {
  content: attr(data-tooltip);

  position: absolute;
  bottom: -145%;
  left: -100%;
  display: inline-block;
  white-space: pre;
  z-index: 99;
  padding: 2px 7px;
  font-size: 1rem;
  line-height: 1rem;
  color: white;
  background: black;
  box-shadow: 1px 1px 1px grey;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  transition-delay: 0.2s;
}

*[data-tooltip]:hover::after {
  opacity: 1;
}

JS

popper.js / tooltip.js - 7.3 KB + 2.2. KB

<button id="myButton">My Button</button>

var el = document.getElementByID("myButton")
new Tooltip(el , {
    placement: 'top', // or bottom, left, right, and variations
    title: "Tooltip text"
});

Tippy.js - 7.3 KB + 7.6 KB

<button id="myButton">My Button</button>

tippy('#myButton', {content: "I'm a Tippy tooltip!"})

Custom

<abbr title="Vermont Department of Health">VDH</abbr> / 

document.querySelectorAll("body [title]").forEach(function(el) {
  var tooltip = document.createElement("div")
  tooltip.classList.add("tooltip-text")
  tooltip.innerText = el.title

  el.title = ""
  el.classList.add("tooltip")
  el.append(tooltip)

  el.onmouseover = function() { 
    tooltip.classList.add("active"); 
    setTimeout(function() {tooltip.classList.remove("active")  }, 5000)
  }
  el.onmouseout = function() {
    tooltip.classList.remove("active")
  }
});