Tiny Smart Tooltip JavaScript Library – Tooltipper

Category: Javascript , Tooltip | October 18, 2021
Author:codewithkyle
Views Total:10 views
Official Page:Go to website
Last Update:October 18, 2021
License:MIT

Preview:

Tiny Smart Tooltip JavaScript Library – Tooltipper

Description:

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.0.1 (10/18/2021)

  • fixed tooltip scroll bug

You Might Be Interested In:


Leave a Reply