Messages
Liam Carter uploaded a new document to Project Phoenix
5 minutes ago
Ava Mitchell commented on Marketing Campaign Q3
12 minutes ago
30 minutes ago
Sophia Taylor sent an invoice for Service Renewal
1 hour ago
Ethan Moore completed the task UI Review
2 hours ago
Olivia White assigned you a task in Sales Pipeline
Yesterday
Tooltips
Examples
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.
Tooltips on Bootstrap
<p class="mb-0">
Powerful admin features like <a href="#" class="fw-medium" data-bs-toggle="tooltip" data-bs-title="Manage your dashboard easily">custom dashboards</a> and UI components help you build scalable web applications efficiently.
This template includes pre-built pages, clean layouts, and reusable code blocks to boost your development workflow.
From user management to analytics and settings, everything is modular and developer-friendly.
Create modern admin panels with <a href="#" class="fw-medium" data-bs-toggle="tooltip" data-bs-title="Built with Bootstrap 5">responsive design</a> and seamless UX.
Get started quickly with a professional-grade <a href="#" class="fw-medium" data-bs-toggle="tooltip" data-bs-title="Tailored for developers">UI toolkit</a> and supercharge your app with <a href="#" class="fw-medium" data-bs-toggle="tooltip" data-bs-title="Includes charts, tables, forms and more">powerful components</a> and flexible layouts.
</p>
Hover over the links below to see tooltips.
Powerful admin features like custom dashboards and UI components help you build scalable web applications efficiently. This template includes pre-built pages, clean layouts, and reusable code blocks to boost your development workflow. From user management to analytics and settings, everything is modular and developer-friendly. Create modern admin panels with responsive design and seamless UX. Get started quickly with a professional-grade UI toolkit and supercharge your app with powerful components and flexible layouts.
<p class="text-muted">Elements with the <code>disabled</code> attribute
aren’t interactive, meaning users cannot focus, hover, or click them to trigger
a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from
a wrapper <code><div></code> or <code><span></code>, ideally made
keyboard-focusable using <code>tabindex="0"</code>, and override the
<code>pointer-events</code> on the disabled element.
</p>
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
<button class="btn btn-primary pe-none" type="button" disabled>Disabled Button</button>
</span>
Elements with the disabled attribute
aren’t interactive, meaning users cannot focus, hover, or click them to trigger
a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from
a wrapper <div> or <span>, ideally made
keyboard-focusable using tabindex="0", and override the
pointer-events on the disabled element.
<p class="text-muted">Elements with the <code>disabled</code> attribute
aren’t interactive, meaning users cannot focus, hover, or click them to trigger
a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from
a wrapper <code><div></code> or <code><span></code>, ideally made
keyboard-focusable using <code>tabindex="0"</code>, and override the
<code>pointer-events</code> on the disabled element.
</p>
<button class="btn btn-primary" type="button" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-title="Tooltip appears on hover only">Hover to See Info</button>
Elements with the disabled attribute
aren’t interactive, meaning users cannot focus, hover, or click them to trigger
a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from
a wrapper <div> or <span>, ideally made
keyboard-focusable using tabindex="0", and override the
pointer-events on the disabled element.
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">Tooltip ontop</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">Tooltip on right</button>
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>New</em> <u>Tooltip</u> <b>with</b> <i>HTML</i> <br>Custom message here!">
Tooltip with HTML
</button>
And with custom HTML added:
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-primary" data-bs-title="This is a primary tooltip with a custom style.">
Primary tooltip
</button>
<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-danger" data-bs-title="This is a danger tooltip with a custom warning message.">
Danger tooltip
</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-info" data-bs-title="This is an info tooltip that provides extra details.">
Info tooltip
</button>
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-success" data-bs-title="This is a success tooltip to indicate completion.">
Success tooltip
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-secondary" data-bs-title="This is a secondary tooltip that gives additional information.">
Secondary tooltip
</button>
<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-warning" data-bs-title="This is a warning tooltip to alert you.">
Warning tooltip
</button>
<button type="button" class="btn btn-dark" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" data-bs-title="This is a dark tooltip with important information.">
Dark tooltip
</button>
<button type="button" class="btn btn-purple" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-purple" data-bs-title="This is a purple tooltip with a vibrant style.">
Purple tooltip
</button>
We set a custom class with ex.
data-bs-custom-class="primary-tooltip" to scope our background-color
primary appearance and use
it to override a local CSS
variable.