Tooltips are useful for showing little bits of extra content. They save space on the page and give you a room to animate something that grabs people’s attention.

In the past, we’ve covered tooltip scripts but many developers want custom libraries. Some prefer jQuery, others want simple vanilla JS.

The Tippy plugin works best for the latter group who want to work with vanilla JS code.

tippy.js tooltips homepagetippy.js tooltips homepage

With Tippy.js you get a fully-functioning tooltip library running on top of Popper.js. This means the plugin does come with a small dependency, but it’s a lot easier to manage than the jQuery library.

So what’s the beauty of Tippy? It adds onto the default Popper styles to create more dynamic tooltips with incredible effects.

You can add fades, slides, wiggles, custom durations, callback methods, and even dynamic effects like auto-rotating tooltips.

Really this plugin will take your tooltips up to a whole new level with well-defined usability features. You can keep tooltips fixed to the screen with certain page elements, or have them change orientation if the screen gets too small.

It also supports touch devices which makes this perfect for responsive layouts. The tooltip HTML is labeled using ARIA standards for maximum accessibility. I can’t think of anything bad to say about this plugin!

tippyjs demotippyjs demo

If you wanna try this in your own site just download a copy of the source code from GitHub. This includes the main plugin files along with details on how to install it using npm.

The default Tippy.js script file comes with Popper.js included so you don’t even need to download that extra library. All you need is the default JS/CSS file and a webpage to run tooltips.

If you wanna dig further into some examples take a look at the Tippy.js homepage which includes live samples + code snippets you can copy and reuse.

The post Tippy.js – Lightweight Vanilla Javascript Tooltip Library appeared first on Hongkiat.

WordPress Website Development

[ continue ]