shadcn-rails

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Stimulus: shadcn--tooltip

Installation

Add the component to your project:

rails generate shadcn:component tooltip

Usage

<%= render Shadcn::TooltipComponent.new(text: "Add to library") do %>
  <%= render Shadcn::ButtonComponent.new(variant: :outline, size: :icon) do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" x2="12" y1="5" y2="19"/><line x1="5" x2="19" y1="12" y2="12"/></svg>
  <% end %>
<% end %>

Examples

Default

Positions

Use the side prop to position the tooltip.

On Icon Buttons

Tooltips are essential for icon-only buttons to provide accessible labels.

With Text

Hover over the highlighted text

to see more information.

Custom Delay

Adjust the delay_duration for different show timings.

API Reference

API Reference

Prop Type Default Description
text String nil Tooltip content text
side Symbol :top Side to show tooltip (:top, :right, :bottom, :left)
align Symbol :center Alignment relative to trigger (:start, :center, :end)
delay_duration Integer 200 Delay before showing (milliseconds)
skip_delay_duration Integer 300 Delay when moving between triggers (milliseconds)
class_name String nil Additional CSS classes to apply

Stimulus Controller

This component requires JavaScript. The Stimulus controller docs provides interactivity.

Handles tooltip show/hide with positioning and delays.

Installation

Add to your config/importmap.rb:

pin "shadcn-rails", to: "shadcn/index.js"

Then in your app/javascript/controllers/index.js:

import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn-rails"

const application = Application.start()
registerShadcnControllers(application)

Or import just this controller:

import DocsController from "shadcn-rails/controllers/docs_controller"

application.register("docs", DocsController)

Targets

Name Description
trigger Element that triggers the tooltip
content Tooltip content element

Values

Name Type Default Description
side String Side to position tooltip
align String Alignment relative to trigger
delay Number Show delay in milliseconds
skipDelay Number Delay when moving between triggers

Actions

Action Description
show Shows the tooltip
hide Hides the tooltip

TypeScript

Type definitions are included. Import types as needed: 

import type { DocsController } from "shadcn-rails"

Accessibility

  • Tooltip content has role="tooltip"
  • Shows on hover and focus for keyboard users
  • For icon-only buttons, tooltips provide the accessible name
  • Do not put interactive content inside tooltips
  • Keep tooltip text concise and informative