Tooltips

Documentation and examples for adding custom Chubby tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

Overview

Things to know when using the tooltip plugin:

• Tooltips rely on Popper.js for positioning (included in the Chubby bundle).
• Tooltips are opt-in for performance reasons, so you must initialize them yourself.
• Tooltips with zero-length titles are never displayed.
• Specify container: 'body' to avoid rendering problems in more complex components.
• Triggering tooltips on hidden elements will not work.

Coloured Tooltips

Tooltips can be coloured. You must opt into this functionality:

Directions

Hover over the buttons below to see the four tooltip directions:

Disabled Elements

Elements with the disabled attribute aren't interactive. Trigger the tooltip from a wrapper: