Tiny Smart Tooltip JavaScript Library – Tooltipper

Tooltipper is a super tiny tooltip JavaScript library that will automatically adjust the tooltip’s position to stay on the screen. For example, it automatically re-positions the tooltip to the left if it overflows the right side of the screen.

How to use it:

1. Import the Tooltipper JavaScript library into the document.

<script defer src=”tooltipper.min.js”></script>

2. Define the tooltip content in the tooltip attribute:

<a href="#" tooltip="Tooltip Content">
  ...
</a>

3. Or in the aria-label attribute:

<a href="#" aria-label="Tooltip Content" tooltip>
  ...
</a>

4. Apply your own CSS styles to the tooltip.

tool-tip {
  background-color: #424242;
  color: #fff;
  border-radius: 0.125rem;
  line-height: 24px;
  height: 24px;
  white-space: nowrap;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
  transform-origin: center;
}
tool-tip.visible {
  animation: limitedTooltip 1725ms 150ms linear forwards;
}
@keyframes limitedTooltip {
  0% {
    opacity: 1;
  }
  4% {
    opacity: 1;
  }
  96% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
}

Changelog:

v1.1.6 (03/28/2023)

• Bugfixed

v1.1.5 (12/15/2022)

• Fixed minor tooltip element null reference bug in tick method

v1.1.4 (02/10/2022)

• Check for definition of TouchEvent

v1.1.3 (01/01/2022)

• fixed sticky tooltip bug

v1.1.2 (12/13/2021)

• Fixed tooltip opacity bug

v1.1.1 (12/12/2021)

• Minor touch device changes

v1.0.1 (10/18/2021)

• fixed tooltip scroll bug