Components

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.

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.

UI components for Ruby on Rails apps

$ 129 one-time
payment

Get Access

  • One-time Payment

  • Access to the Entire Library

  • Built for Ruby on Rails (inc. Rails 8)

  • Designed with Tailwind CSS and Enhanced with Hotwire

  • Updates for 12 months