InfoTip (Tooltip) plugin made with CSS

The InfoTip plugin is small pop-up box that appears when the user moves the mouse pointer over an element.

I often see little question mark icons in larger forms and more complex pages. They’re useful for grabbing attention and informing users about specific parts of the page.

When creating a web app, you often need to present people with friendly help prompts that explain parts of your interface. One of the ways to do it, is to have separate pages with help topics that you link to. However, this causes people to lose context of what they are doing and is not very user friendly.

A better way is to show help text right where it is needed. Here is how to do it only with a few CSS rules and a tiny bit of HTML! Let’s get started!

Video Tutorial

Leave a Comment

Your email address will not be published.