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

tooltip/default

<%= render Shadcn::TooltipComponent.new(text: "Hover me!") do %>
  <%= render Shadcn::ButtonComponent.new(variant: :outline) { "Hover" } %>
<% end %>

Installation

Add the component to your project:

rails generate shadcn:add tooltip

Usage

<%= render Shadcn::TooltipComponent.new(text: "Hover me!") do %>
  <%= render Shadcn::ButtonComponent.new(variant: :outline) { "Hover" } %>
<% end %>

Examples

Default

<%= render Shadcn::TooltipComponent.new(text: "Hover me!") do %>
  <%= render Shadcn::ButtonComponent.new(variant: :outline) { "Hover" } %>
<% end %>

Positions

Use the side prop to position the tooltip.

<div class="flex items-center gap-4">
  <%= render Shadcn::TooltipComponent.new(text: "Top tooltip", side: :top) do %>
    <%= render Shadcn::ButtonComponent.new(variant: :outline) { "Top" } %>
  <% end %>
  <%= render Shadcn::TooltipComponent.new(text: "Right tooltip", side: :right) do %>
    <%= render Shadcn::ButtonComponent.new(variant: :outline) { "Right" } %>
  <% end %>
  <%= render Shadcn::TooltipComponent.new(text: "Bottom tooltip", side: :bottom) do %>
    <%= render Shadcn::ButtonComponent.new(variant: :outline) { "Bottom" } %>
  <% end %>
  <%= render Shadcn::TooltipComponent.new(text: "Left tooltip", side: :left) do %>
    <%= render Shadcn::ButtonComponent.new(variant: :outline) { "Left" } %>
  <% end %>
</div>

On Icon Buttons

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

<div class="flex items-center gap-2">
  <%= render Shadcn::TooltipComponent.new(text: "Bold") 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"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/></svg>
    <% end %>
  <% end %>
  <%= render Shadcn::TooltipComponent.new(text: "Italic") 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="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
    <% end %>
  <% end %>
  <%= render Shadcn::TooltipComponent.new(text: "Underline") 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"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
    <% end %>
  <% end %>
</div>

With Text

Hover over the highlighted text

to see more information.

<p class="text-sm">
  Hover over the
  <%= render Shadcn::TooltipComponent.new(text: "This is additional information") do %>
    <span class="underline decoration-dotted cursor-help">highlighted text</span>
  <% end %>
  to see more information.
</p>

Custom Delay

Adjust the delay_duration for different show timings.

<div class="flex items-center gap-4">
  <%= render Shadcn::TooltipComponent.new(text: "Instant (0ms)", delay_duration: 0) do %>
    <%= render Shadcn::ButtonComponent.new(variant: :outline) { "Instant" } %>
  <% end %>
  <%= render Shadcn::TooltipComponent.new(text: "Default (200ms)", delay_duration: 200) do %>
    <%= render Shadcn::ButtonComponent.new(variant: :outline) { "Default" } %>
  <% end %>
  <%= render Shadcn::TooltipComponent.new(text: "Slow (500ms)", delay_duration: 500) do %>
    <%= render Shadcn::ButtonComponent.new(variant: :outline) { "Slow" } %>
  <% end %>
</div>

All Sides

tooltip/sides

<div class="flex flex-wrap gap-2">
  <%= render Shadcn::Tooltip.new(text: "Appears above", side: :top) do %>
    <%= render Shadcn::Button.new(variant: :outline) { "Top" } %>
  <% end %>
  <%= render Shadcn::Tooltip.new(text: "Appears to the right", side: :right) do %>
    <%= render Shadcn::Button.new(variant: :outline) { "Right" } %>
  <% end %>
  <%= render Shadcn::Tooltip.new(text: "Appears below", side: :bottom) do %>
    <%= render Shadcn::Button.new(variant: :outline) { "Bottom" } %>
  <% end %>
  <%= render Shadcn::Tooltip.new(text: "Appears to the left", side: :left) do %>
    <%= render Shadcn::Button.new(variant: :outline) { "Left" } %>
  <% end %>
</div>

With Icon Button

tooltip/with_icon_button

<%= render Shadcn::Tooltip.new(text: "Add to library") do %>
  <%= render Shadcn::Button.new(variant: :outline, class_name: "h-10 w-10 p-0", aria: { label: "Add" }) do %>
    +
  <% end %>
<% end %>

Top

tooltip/top

<%= render Shadcn::Tooltip.new(text: "This is a helpful tooltip", side: :top) do %>
  <%= render Shadcn::Button.new(variant: :secondary) { "Top" } %>
<% end %>

Right

tooltip/right

<%= render Shadcn::Tooltip.new(text: "This is a helpful tooltip", side: :right) do %>
  <%= render Shadcn::Button.new(variant: :secondary) { "Right" } %>
<% end %>

Bottom

tooltip/bottom

<%= render Shadcn::Tooltip.new(text: "This is a helpful tooltip", side: :bottom) do %>
  <%= render Shadcn::Button.new(variant: :secondary) { "Bottom" } %>
<% end %>

Left

tooltip/left

<%= render Shadcn::Tooltip.new(text: "This is a helpful tooltip", side: :left) do %>
  <%= render Shadcn::Button.new(variant: :secondary) { "Left" } %>
<% end %>

With Delay

tooltip/with_delay

<%= render Shadcn::Tooltip.new(text: "Appears after 1 second", delay_duration: 1000) do %>
  <%= render Shadcn::Button.new(variant: :outline) { "Hover (1s delay)" } %>
<% end %>

Multiple Tooltips

{:args=>{}, :block=>#, :component=>#, :locals=>{}, :template=>"view_components/preview"} {:args=>{}, :block=>#, :component=>#, :locals=>{}, :template=>"view_components/preview"} {:args=>{}, :block=>#, :component=>#, :locals=>{}, :template=>"view_components/preview"}

tooltip/multiple

<div class="flex gap-2">
  <%= render Shadcn::Tooltip.new(text: "Edit") do %>
    <%= render Shadcn::Button.new(variant: :ghost, class_name: "h-10 w-10 p-0", aria: { label: "Edit" }) { "Edit" } %>
  <% end %>
  <%= render Shadcn::Tooltip.new(text: "Delete") do %>
    <%= render Shadcn::Button.new(variant: :ghost, class_name: "h-10 w-10 p-0", aria: { label: "Delete" }) { "Delete" } %>
  <% end %>
</div>

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 shadcn--tooltip provides interactivity.

Handles tooltip show/hide with positioning and delays.

Installation

Add to your config/importmap.rb:

pin "shadcn", to: "index.esm.js"

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

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

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

Install the package:

npm install shadcn-rails-stimulus

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

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

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

Install the package:

yarn add shadcn-rails-stimulus

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

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

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

Install the package:

npm install shadcn-rails-stimulus

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

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

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

Or import just this controller:

import TooltipController from "shadcn-rails-stimulus/controllers/tooltip_controller"

application.register("shadcn--tooltip", TooltipController)

Targets

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

Values

Name	Type	Default	Description
side	`String`	`"top"`	Side to position tooltip
align	`String`	`"center"`	Alignment relative to trigger
delay	`Number`	`200`	Show delay in milliseconds
skipDelay	`Number`	`300`	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 { TooltipController } from "shadcn-rails-stimulus"

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

On This Page

Installation Usage Examples API Reference