Press "Enter" to skip to content

A Simple and Lightweight Javascript Plugin for Tooltip

Tooltip is a lightweight JavaScript library for creating animated, customizable HTML5 hints on any element.

How to make use of it:

1. To get began, embrace the next information on the web page.

<link rel="stylesheet" href="dist/tooltip.min.css" />
<script src="dist/tooltip.min.js"></script>

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

<button data-tooltip="Tooltip Content">
  Hover Me
</button>

3. Determine at which level the tooltip should seem.

<button data-tooltip="Tooltip Content"
        data-tooltip-position="bottom">
  Hover Me
</button>

4. Determine the area between the tooltip and its trigger component.

<button data-tooltip="Tooltip Content"
        data-tooltip-margin="10">
  Hover Me
</button>

5. Config the tooltip animation.

<button data-tooltip="Tooltip Content"
        data-tooltip-enter-delay="0"
        data-tooltip-exit-delay="0"
        data-tooltip-show-duration="300"
        data-tooltip-hide-duration="200"
        data-tooltip-transition-distance="200">
  Hover Me
</button>

6. Set the z-index of the tooltip.

<button data-tooltip="Tooltip Content"
        data-tooltip-z-index="999">
  Hover Me
</button>

Tiny HTML5 Tooltip, Tooltip Plugin/Github

Read More  A Robust Javascript Library for Capturing Keyboard Input | hotkeys

See Demo And Download

Official Website(sa-si-dev): Click Here

This superior jQuery/javascript plugin is developed by sa-si-dev. 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 *