Tooltips built for Rails with Tailwind CSS and Stimulus
Guide users through your Rails app with tooltips. From just some text to more advanced HTML (eg. highlighting a keyboard shortcut). Position of the tooltip and if it should show on hover or click can be set.
-
Plain text # Get this component
JavaScript is disabled for this preview.Hover here Just a text tooltip for a plain text tooltip.
-
HTML content # Get this component
JavaScript is disabled for this preview.Hover here This is bold, is it not? for a HTML content tooltip.
-
Plain text, bottom position # Get this component
Other supported positions are: `top`, `top-start`, `top-end`, `right`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end` JavaScript is disabled for this preview.Hover here Positioned below the element for a tooltip positioned below the element.
-
Plain text, dark theme # Get this component
JavaScript is disabled for this preview.Hover here Plain text, with dark theme for a HTML content tooltip.
-
Advanced HTML, dark theme # Get this component
JavaScript is disabled for this preview.Hover here Dashboard g then h for an advanced HTML content tooltip.
-
Plain text, show on click # Get this component
JavaScript is disabled for this preview.Click here Just a text tooltip for a plain text tooltip.
The library of components is continuously evolving, with new components added regularly. See the roadmap for a glimpse of future enhancements, and check out the changelog for the latest additions and updates.