Class: BetterUi::General::Tooltip::Component

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/better_ui/general/tooltip/component.rb

Constant Summary collapse

TOOLTIP_BASE_CLASSES =

Classi base sempre presenti

"relative inline-block"
TOOLTIP_BUBBLE_BASE_CLASSES =

Classi base per il bubble del tooltip

"absolute z-50 px-2 py-1 text-sm rounded shadow-lg opacity-0 pointer-events-none transition-opacity duration-200"
TOOLTIP_HOVER_CLASSES =

Classi per la visibilità su hover

"group-hover:opacity-100"
TOOLTIP_POSITIONS =

Posizioni del tooltip con classi Tailwind dirette

{
  top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
  right: "left-full top-1/2 transform -translate-y-1/2 ml-2",
  bottom: "top-full left-1/2 transform -translate-x-1/2 mt-2",
  left: "right-full top-1/2 transform -translate-y-1/2 mr-2"
}
TOOLTIP_SIZES =

Dimensioni del tooltip con classi Tailwind dirette

{
  small: "px-1.5 py-0.5 text-xs",
  medium: "px-2 py-1 text-sm",
  large: "px-3 py-2 text-base"
}
TOOLTIP_FILLED_THEMES =

Temi di tooltip con classi Tailwind dirette - Stile filled

{
  default: "bg-gray-900 text-white",
  white: "bg-white text-gray-900 border border-gray-200",
  red: "bg-red-600 text-white",
  rose: "bg-rose-600 text-white",
  orange: "bg-orange-600 text-white",
  green: "bg-green-600 text-white",
  blue: "bg-blue-600 text-white",
  yellow: "bg-yellow-600 text-white",
  violet: "bg-violet-600 text-white"
}
TOOLTIP_OUTLINE_THEMES =

Temi di tooltip con classi Tailwind dirette - Stile outline

{
  default: "bg-white text-gray-900 border border-gray-900",
  white: "bg-gray-50 text-gray-900 border border-gray-300",
  red: "bg-white text-red-600 border border-red-600",
  rose: "bg-white text-rose-600 border border-rose-600",
  orange: "bg-white text-orange-600 border border-orange-600",
  green: "bg-white text-green-600 border border-green-600",
  blue: "bg-white text-blue-600 border border-blue-600",
  yellow: "bg-white text-yellow-600 border border-yellow-600",
  violet: "bg-white text-violet-600 border border-violet-600"
}
TOOLTIP_ARROW_BASE_CLASSES =

Classi per le frecce del tooltip - Filled

"absolute w-2 h-2 transform rotate-45"
TOOLTIP_ARROW_POSITIONS = 
{
  top: "top-full left-1/2 -translate-x-1/2 -mt-1",
  right: "right-full top-1/2 -translate-y-1/2 -mr-1",
  bottom: "bottom-full left-1/2 -translate-x-1/2 -mb-1",
  left: "left-full top-1/2 -translate-y-1/2 -ml-1"
}
TOOLTIP_ARROW_FILLED_THEMES = 
{
  default: "bg-gray-900",
  white: "bg-white border border-gray-200",
  red: "bg-red-600",
  rose: "bg-rose-600",
  orange: "bg-orange-600",
  green: "bg-green-600",
  blue: "bg-blue-600",
  yellow: "bg-yellow-600",
  violet: "bg-violet-600"
}
TOOLTIP_ARROW_OUTLINE_THEMES = 
{
  default: "bg-white border border-gray-900",
  white: "bg-gray-50 border border-gray-300",
  red: "bg-white border border-red-600",
  rose: "bg-white border border-rose-600",
  orange: "bg-white border border-orange-600",
  green: "bg-white border border-green-600",
  blue: "bg-white border border-blue-600",
  yellow: "bg-white border border-yellow-600",
  violet: "bg-white border border-violet-600"
}

Instance Method Summary collapse

Constructor Details

#initialize(text: nil, theme: :white, position: :top, size: :medium, style: :filled, classes: nil, **html_options) ⇒ Component

Returns a new instance of Component.

Parameters:

  • text (String) (defaults to: nil) —

    testo del tooltip

  • theme (Symbol) (defaults to: :white) —

    :default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet

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

    :top, :right, :bottom, :left posizione del tooltip

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

    :small, :medium, :large dimensione del tooltip

  • style (Symbol) (defaults to: :filled) —

    :filled, :outline stile del tooltip

  • classes (String) (defaults to: nil) —

    classi CSS aggiuntive per il container

  • html_options (Hash) —

    opzioni HTML per il container



96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
# File 'app/components/better_ui/general/tooltip/component.rb', line 96

def initialize(
  text: nil,
  theme: :white,
  position: :top,
  size: :medium,
  style: :filled,
  classes: nil,
  **html_options
)
  @text = text
  @theme = theme.to_sym
  @position = position.to_sym
  @size = size.to_sym
  @style = style.to_sym
  @classes = classes
  @html_options = html_options

  validate_params
end

Instance Method Details

#arrow_classes ⇒ Object

Combina tutte le classi per la freccia del tooltip



138
139
140
141
142
143
144
 
# File 'app/components/better_ui/general/tooltip/component.rb', line 138

def arrow_classes
  [
    TOOLTIP_ARROW_BASE_CLASSES,
    get_arrow_position_class,
    get_arrow_theme_class
  ].compact.join(" ")
end

#bubble_classes ⇒ Object

Combina tutte le classi per il bubble del tooltip



127
128
129
130
131
132
133
134
135
 
# File 'app/components/better_ui/general/tooltip/component.rb', line 127

def bubble_classes
  [
    TOOLTIP_BUBBLE_BASE_CLASSES,
    get_position_class,
    get_size_class,
    get_theme_class,
    TOOLTIP_HOVER_CLASSES
  ].compact.join(" ")
end

#combined_classes ⇒ Object

Combina tutte le classi per il container



117
118
119
120
121
122
123
124
 
# File 'app/components/better_ui/general/tooltip/component.rb', line 117

def combined_classes
  [
    TOOLTIP_BASE_CLASSES,
    "group", # Necessario per il trigger hover
    @classes,
    @html_options[:class]
  ].compact.join(" ")
end

#get_arrow_position_class ⇒ Object

Genera le classi per la posizione della freccia



182
183
184
 
# File 'app/components/better_ui/general/tooltip/component.rb', line 182

def get_arrow_position_class
  TOOLTIP_ARROW_POSITIONS[@position] || TOOLTIP_ARROW_POSITIONS[:top]
end

#get_arrow_theme_class ⇒ Object

Genera le classi per il tema della freccia



187
188
189
190
191
192
193
 
# File 'app/components/better_ui/general/tooltip/component.rb', line 187

def get_arrow_theme_class
  if @style == :outline
    TOOLTIP_ARROW_OUTLINE_THEMES[@theme] || TOOLTIP_ARROW_OUTLINE_THEMES[:white]
  else
    TOOLTIP_ARROW_FILLED_THEMES[@theme] || TOOLTIP_ARROW_FILLED_THEMES[:white]
  end
end

#get_position_class ⇒ Object

Genera le classi per la posizione



163
164
165
 
# File 'app/components/better_ui/general/tooltip/component.rb', line 163

def get_position_class
  TOOLTIP_POSITIONS[@position] || TOOLTIP_POSITIONS[:top]
end

#get_size_class ⇒ Object

Genera le classi per la dimensione



168
169
170
 
# File 'app/components/better_ui/general/tooltip/component.rb', line 168

def get_size_class
  TOOLTIP_SIZES[@size] || TOOLTIP_SIZES[:medium]
end

#get_theme_class ⇒ Object

Genera le classi per il tema



173
174
175
176
177
178
179
 
# File 'app/components/better_ui/general/tooltip/component.rb', line 173

def get_theme_class
  if @style == :outline
    TOOLTIP_OUTLINE_THEMES[@theme] || TOOLTIP_OUTLINE_THEMES[:white]
  else
    TOOLTIP_FILLED_THEMES[@theme] || TOOLTIP_FILLED_THEMES[:white]
  end
end

#render? ⇒ Boolean

Verifica se il componente deve essere renderizzato

Returns:

  • (Boolean) 


196
197
198
 
# File 'app/components/better_ui/general/tooltip/component.rb', line 196

def render?
  @text.present? && content.present?
end

#tooltip_attributes ⇒ Object

Restituisce gli attributi per il container del tooltip



147
148
149
150
151
152
153
154
155
156
157
158
159
160
 
# File 'app/components/better_ui/general/tooltip/component.rb', line 147

def tooltip_attributes
  attrs = {
    class: combined_classes,
    role: "tooltip",
    "data-tooltip": @text
  }

  # Aggiungi altri attributi HTML se presenti
  @html_options.except(:class).each do |key, value|
    attrs[key] = value
  end

  attrs
end