Tooltips & Popovers

What are tooltips and popovers?

A tooltip is a small text label that appears when the user hovers over or focuses an element, explaining what an icon or control does. A popover is a larger floating panel attached to a trigger, which can contain a title, formatted text, links or even small forms, and usually opens on click. Both are used to give contextual help without cluttering the interface: icon descriptions in toolbars, field hints in forms, user previews and quick settings.

When to use them

• Use tooltips for short, non-essential descriptions, ideally one line.
• Use popovers for richer content or interactive elements that would not fit in a tooltip.
• Never hide critical information or the only label of a control inside a tooltip.
• Position the floating element so it stays inside the viewport and flips side when there is no space.
• On touch devices, hover does not exist, so make sure the information is reachable by tap or visible elsewhere.

Accessibility

Tooltips must appear on keyboard focus as well as hover, stay visible while the pointer moves onto them, and close with Escape. Connect the tooltip to its trigger with aria-describedby and give it role="tooltip". Popovers that contain interactive content behave like non-modal dialogs: the trigger should have aria-expanded, focus should move into the popover, and closing it should return focus to the trigger. The native popover attribute in modern browsers handles light dismiss and top-layer stacking without extra JavaScript.

Framework versions

These bootstrap tooltip examples and CSS popover snippets come in Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap 5 versions require initialising tooltips and popovers in JavaScript; Bootstrap 6 versions use the new ES module build. Pure CSS versions show tooltips with :hover and :focus-visible, and some examples use the native popover attribute. Test them in the live preview, then copy the code from the code tabs or download it.