@@include("./partials/title-meta.html", {"title": "Tooltips"}) @@include('./partials/head-css.html')
@@include('./partials/topbar.html') @@include('./partials/sidenav.html')
@@include("./partials/page-title.html", {"subtitle":"UI", "title":"Tooltips"})

#### Basic

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.

#### Disabled Elements

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.

#### Hover Elements

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.

#### Four Directions

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

#### HTML Tags

And with custom HTML added:

#### Color Tooltips

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.

@@include('./partials/footer.html')
@@include('./partials/customizer.html') @@include('./partials/footer-scripts.html')