Basic
Hover over the links below to see tooltips.
Powerful admin features like 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 and seamless UX. Get started quickly with a professional-grade and supercharge your app with 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 tooltip directions: top, right, bottom, and left. Remove the
[--placement:*]
option to enable automatic positioning.
HTML Tags
And with custom HTML added:
Color Tooltips
Use color tooltips to match your theme and highlight elements with a custom background color.