Tooltips

Default Tooltips

Hover over elements to see tooltips

Tooltips are great for providing additional context to users without cluttering the interface.

Tooltip Directions

Tooltips can appear in four directions

Visual direction reference:

Top Right Bottom Left Element
Tooltips on Various Elements
Tooltips on Icons

Common pattern for icon-only buttons

Standalone icons:

Tooltips on Links & Text

Provide additional context for text elements

Our privacy policy explains how we handle your data. For questions about pricing, please contact our sales team.

Technical terms like API, CSS, and HTML can be explained with tooltips.

Inline help text:

Password requirements

HTML & Custom Tooltips
HTML Content in Tooltips

Rich content with formatting

data-bs-html="true"

Enable HTML content in tooltips with this attribute.

Tooltips on Disabled Elements

Wrap disabled elements in a container

Disabled elements need a wrapper for tooltips to work:

Pattern:

<span data-bs-toggle="tooltip" title="...">
  <button disabled>...</button>
</span>
Tooltips in Forms
Form Field Tooltips

Help users understand form requirements

Validation Tooltips

Bootstrap validation with tooltip feedback

Looks good!
Looks good!
@
Please choose a unique username.
Please provide a valid city.
Real-World Examples
Editor Toolbar

Text editor with tooltip-enabled buttons

Start typing here...

User Table with Actions

Tooltips on table action buttons

User Status Actions
User
Active
User
Sarah Smith
[email protected]
Away
User
Mike Johnson
[email protected]
Offline
Stats with Tooltips

Dashboard stats with explanatory tooltips

Total Revenue

$48,294

12.5% vs last month
Conversion Rate

3.24%

2.1% vs last month
Avg. Order Value

$127.50

5.3% vs last month
Active Users

8,420

18.2% vs last month
Navigation with Tooltips

Compact navigation with icon tooltips

Icon-only navigation (compact sidebar style):

Social Sharing Buttons

Share buttons with platform names in tooltips

Share this article:

Colored buttons variant:

Truncated Text with Tooltips

Show full content on hover for truncated text

  • This is a very long file name that gets truncated in the UI display.pdf 2.4 MB
  • Annual_Financial_Report_2024_Q4_Final_Version_Approved.xlsx 1.8 MB
  • Project_Documentation_and_Technical_Specifications_v3.2.docx 856 KB