- Vanilla
- Video
Notyf: Simple notification plugin
Notyf is probably the quickest way to add notifications to your website or app. This plugin allows to show non-blocking, stacked notifications in a pretty good looking way.
Notyf is a dead simple, responsive, vanilla javascript plugin for showing notifications on site. No jQuery required.
mouseTip: Cursor tooltips that follow mouse movement and position
Lightweight jQuery extension for creating cursor tooltips that follow mouse movement and position.
Illustration by akselkreis
Marginotes: Reveal notes in the margin on hover
Marginotes takes your jQuery selection and adds notes to the margin with the text provided in HTML attributes. If you don’t want to use jQuery, there’s also a version of marginotes without it.
Marginotes works by adding a desc attribute to an HTML element, which will be displayed as a tooltip:
It works with links, as well as with <span> elements.
Illustration by akselkreis
- Paid
flavr: Flat jQuery Popup Dialog
Flavr is a fresh and stylish popup dialog for your next flat website. It is built to be responsive, able to adapt its layout and position to any screen size of your viewer with the power of CSS.
To get the best user experience, flavr is animated using the popular animate.css. And most importantly, flavr works on any modern browser (IE8+), any device and any screen size.
Features of flavr include:
- Clean and modern flat design
- Well documented
- Fully responsive
- Lightweight, yet powerful
- Bootstrap compatible
- CSS3 animated in modern browsers
- jQuery powered
- Cross browser support
This plugin is available for $6 from the Envato Market and is quality checked and comes with future updates and 6 months of support. Additional support is also available.
- Spotlight
bigfoot.js: Create Better Footnotes
Bigfoot is a jQuery plugin to help you create better footnotes and make them a lot easier to use.
Footnotes on the web can be a pain; you click a tiny number, get transported somewhere near the bottom of the page, find the footnote, and click on a link to go back where you can from.
This script makes that process painless by automatically detecting the footnote link and content. Then it turns the link into an easy-to-click button, and adds a popover when the the footnote button is clicked.
The script and default styles are built to work great on any size viewport; the popover is positioned on the top or bottom automatically (based on the relative amount of space), will update its location as the viewport changes size and will ensure that the popover never scrolls off screen. These elements make for a better user experience.
The tool is easy to install and use and comes with some options so you can make adjustments on your own.
jBox: Manage the Popup Windows
This nifty little plugin helps manage your popup windows, including tool tips, notices and more. jBox is packed with powerful options and a few surprises for anyone that might want to use an online notification.
There are eight tool tip options — from basic tool tips to no-close options to color and style choices to click and scroll features.
There are four modal window tools — basic, draggable, ajax and submit. Plus, four notice tools with positioning at the top or bottom of the screen and visual options such as color.
The final style for jBox includes to image gallery formats.
This plugin is ready to go and easy to use right from the install. It’s optimized for retina screens, will work in any environment including IE 8+ and is lightweight, at only 19kb.
The only thing left to do is get started with jBox and all the customizations you can make for notification and popup windows for your website design.
TourTip: Interactive Visual Guide
TourTip is an interactive visual guide to elements on web pages.
Instead of cluttering your interface with static help message, or explanatory text, add a page guide and let users learn about new features and functions.
TourTip is a simple library for creating guided tours through your application. It’s better suited to complex, single-page applications than websites. Our main requirement was the ability to control the interface for each step. For example, a step might need count seconds before moving to the next step, or wait for the user to complete a task. TourTip gives you the ability to manage these parameters all at once or for each step separately.
TourTip gives you everything you need to call out new features. It is extremely flexible and lets you take control of how people interact with your tour. It is designed to be cross-browser compatible with modern browsers and even uses some fancy CSS to avoid images.
You can also add external content as well as images to the guides to make them more comprehensive.
The plugin is pretty powerful and has a lot of options which gives you the power to build a very cool tour. Use TourTip for websites, products, applications, landing pages or something else.
Offscreen
Detects if an element falls off the right/left side of the viewport.
Progression
Gives users real time hints & progress updates as they complete forms.
