Class: BetterUi::TooltipComponent

Inherits:
ApplicationComponent show all
Defined in:
app/components/better_ui/tooltip_component.rb

Overview

A tooltip component that shows a tooltip on hover/focus.

Uses a Stimulus controller with fixed positioning to escape overflow:hidden/auto clipping contexts.

Examples:

Basic tooltip

<%= render BetterUi::TooltipComponent.new(text: "Save changes") do %>
  <button>Save</button>
<% end %>

Tooltip with position and variant

<%= render BetterUi::TooltipComponent.new(text: "Delete item", position: :bottom, variant: :light) do %>
  <button>Delete</button>
<% end %>

Tooltip with larger size

<%= render BetterUi::TooltipComponent.new(text: "More information here", size: :md) do %>
  Hover me
<% end %>

Constant Summary collapse

POSITIONS = 
%i[top right bottom left].freeze
TOOLTIP_VARIANTS = 
%i[dark light].freeze
SIZES = 
%i[sm md].freeze

Constants inherited from ApplicationComponent

ApplicationComponent::SHADOWS, ApplicationComponent::VARIANTS, ApplicationComponent::VARIANT_BODY_DIVIDE, ApplicationComponent::VARIANT_DIVIDE, ApplicationComponent::VARIANT_HEADER_BG, ApplicationComponent::VARIANT_HEADER_TEXT, ApplicationComponent::VARIANT_HIGHLIGHTED, ApplicationComponent::VARIANT_HOVERABLE, ApplicationComponent::VARIANT_RING, ApplicationComponent::VARIANT_SORT_ICON, ApplicationComponent::VARIANT_STRIPED

Instance Method Summary collapse

Constructor Details

#initialize(text:, position: :top, variant: :dark, size: :sm, container_classes: nil, **options) ⇒ TooltipComponent

Initializes a new tooltip component.

Parameters:

  • text (String) —

    the tooltip content (required)

  • position (Symbol) (defaults to: :top) —

    tooltip position (:top, :right, :bottom, :left), defaults to :top

  • variant (Symbol) (defaults to: :dark) —

    tooltip style variant (:dark, :light), defaults to :dark

  • size (Symbol) (defaults to: :sm) —

    tooltip text size (:sm, :md), defaults to :sm

  • container_classes (String, nil) (defaults to: nil) —

    additional CSS classes for the outer wrapper

  • options (Hash) —

    additional HTML attributes

Raises:

  • (ArgumentError) —

    if position is not one of the allowed values

  • (ArgumentError) —

    if variant is not one of the allowed values

  • (ArgumentError) —

    if size is not one of the allowed values



42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
# File 'app/components/better_ui/tooltip_component.rb', line 42

def initialize(
  text:,
  position: :top,
  variant: :dark,
  size: :sm,
  container_classes: nil,
  **options
)
  @text = text
  @position = validate_position(position)
  @variant = validate_tooltip_variant(variant)
  @size = validate_size(size)
  @container_classes = container_classes
  @options = options
end