Press "Enter" to skip to content

A Lightweight JavaScript Library to Implement Tooltips | Tooltipper

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


See Demo And Download

Official Website(codewithkyle): Click Here

This superior jQuery/javascript plugin is developed by codewithkyle. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *