A Lightweight JavaScript Library to Implement Tooltips

Tooltipper is a lightweight (750-byte) JavaScript library for implementing tooltips that will automatically adjust the position of the tooltip to stay on screen.

javascript dynamic tooltip on mouseover, tooltip using javascript onmouseover, add tooltip using javascript, javascript tooltip library, dynamic position tooltip javascript

Bootstrap Tooltips and Popovers Extend By Adding Custom Classes

How to make use of it:

1. Import the Tooltipper JavaScript library into the doc.

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

2. Define the tooltip content material within the tooltip attribute:

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

3. Or within the aria-label attribute:

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

4. Apply your personal CSS types 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;
  }
}

Tiny Smart Tooltip JavaScript Library, Tooltipper Plugin/Github, javascript keep tooltip on screen, creative tooltips, tooltip type popup