Components / Tooltip

Tooltip

Stable Stimulus: senren--tooltip

supplementary hints on hover/focus

Usage example #

Copy this ERB into a Rails view after installing the component. The snippet below is the same code used by the live preview above.

app/views/.../tooltip_example.html.erb

<div class="flex w-full justify-center">
  <%= render Senren::TooltipComponent.new(text: "This is a tooltip") do %>
    <%= render(Senren::ButtonComponent.new(variant: :secondary)) { "Hover me" } %>
  <% end %>
</div>

Install this component #

Copy the official component into your app

This component requires Stimulus. Keep --client so the controller is copied with the ViewComponent.

Terminal

bin/rails senren:add tooltip --client

Create a custom component with the same conventions

Use this when you need an app-specific component that follows Senren's ViewComponent and Stimulus structure. --client is required for this behavior.

Terminal

bin/rails generate senren:component tooltip --client

At a glance #

Category Overlays

Class name Senren::TooltipComponent

Stimulus senren--tooltip

Variants default

Depends on —

Pairs with button, badge, icon

Source #

app/components/senren/tooltip_component.html.erb

<span data-controller="senren--tooltip" class="relative inline-block" data-senren-component="tooltip">
  <span tabindex="0"
        aria-describedby="<%= id %>"
        data-action="mouseenter->senren--tooltip#show mouseleave->senren--tooltip#hide focus->senren--tooltip#show blur->senren--tooltip#hide">
    <%= content %>
  </span>
  <span id="<%= id %>" role="tooltip" hidden data-senren--tooltip-target="bubble"
        class="absolute z-50 mt-1 whitespace-nowrap rounded-md bg-[hsl(var(--senren-foreground))] text-[hsl(var(--senren-background))] px-2 py-1 text-xs shadow"><%= text %></span>
</span>

app/components/senren/tooltip_component.rb

# frozen_string_literal: true

module Senren
  class TooltipComponent < BaseComponent
    VARIANTS = { default: '' }.freeze
    SIZES    = { md: '' }.freeze

    def initialize(text:, class_name: nil, **html)
      super(variant: :default, size: :md, class_name: class_name, **html)
      @text = text
      @id = "senren-tooltip-#{SecureRandom.hex(3)}"
    end

    attr_reader :text, :id
  end
end

AI agent rules #

Use for

+supplementary hints on hover/focus

Avoid

-storing required information only in tooltip

Accessibility #

Use aria-describedby; never put critical info in tooltips alone.
Keyboard focus must show the tooltip.

Popover

Hover Card