Create Customizable Tooltips jQuery Plugin | jBox

jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries, and more these plugins implement a variety of popups on the webpage and the app.

With the jBox plugin, you can create:

  • Retractable conditional fund
  • Animated notification
  • Nice looking tip
  • A simplified view of the photo gallery

Must Read: A jQuery Plugin for Creating Funky Tooltips | funkyTooltips

How to make use of it:

1. Installation:

npm install --save jbox
import jBox from 'jbox';
import 'jbox/dist/jBox.all.css';

2. jsDelivr is a great CDN option for jBox:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/jBox.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/jBox.all.min.css" rel="stylesheet">

3. Create a new copy of the jBox Tooltip and attach it to the elements:

new jBox('Tooltip', {
  attach: '.tooltip'
});

4. Items with class="tooltip" will now open tooltips:

<span class="tooltip" title="My tooltip">Hover me!</span>
<span class="tooltip" title="Another tooltip">Hover me!</span>

Must Read: A Lightweight JavaScript Library to Implement Tooltips | Tooltipper

Demos

  • Access the active attached element
  • Draggable popup windows
  • Notice positions
  • Notices with different autoClose times
  • Tooltip positions
  • The tooltip stays open on mouseenter

Read More – 

JavaScript Positioning for Tooltips, Popovers, Dropdowns Library
A JQuery-based Bubble Tooltip Plugin | contip.js


See Demo And Download

Official Website(StephanWagner): Click Here

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

Share