Tooltips and Popovers

Tooltips

A tooltip is a brief, informative message that appears when a user interacts with an element in a graphical user interface (GUI). Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture. They are meant to clarify or help using the content they hover over, not to add additional conten

• Don’t use tooltips for information that is vital to task completion.
• Provide brief and helpful content inside the tooltip.
• Support both mouse and keyboard hover.
• Use tooltip arrows when multiple elements are nearby.
• Use tooltips consistently throughout your site.
• Provide tooltips for unlabeled icons.
• Ensure tooltips have moderate contrast against the background.
• Position tooltips so they don’t block related content.

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

Hover over the buttons below to see their tooltips.

Show/Hide Code

Popovers

Show important notifications and additional information in popovers. This UI pattern has the advantage of providing a lightweight and straightforward way of viewing additional information or taking a particular action, but they do so without pulling the user out of their current activity.

Popovers are meant to give related additional content. While tooltips are meant to convey the intent of an element, Popovers may be more verbose, and can include a header and many lines of text in the body.

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

Four options are available: top, right, bottom, and left aligned.

Show/Hide Code