For a recent project, I had to create a tooltip widget that positions itself differently depending where it is on the page, and what type of HTML element the tooltip is attached to. For instance, if the tooltip is attached to a form field, button, or table cell, it should display outside of that element. But if it’s attached to anything else it can overlap the object. As well, the tooltip should be displayed on the left of the element if it is on the right side of the page, or on the top if it is on the bottom half of the page, etc.

Add the following CSS and JavaScript code to your web project. Then simply call tipoff.init() to enable tooltips. Add a “tooltip” HTML attribute to any elements on your pages and specify the text you want to appear. When you mouseover or focus into those elements, the tooltip will appear in the correct position.

Requirements

  • jQuery

The CSS

The JavaScript