Class: Fluxbit::TooltipComponent

Inherits:
Component
  • Object
show all
Includes:
Config::TooltipComponent
Defined in:
app/components/fluxbit/tooltip_component.rb

Overview

The ‘Fluxbit::TooltipComponent` is a component for rendering customizable tooltips. It extends `Fluxbit::Component` and provides options for configuring the tooltip’s appearance and behavior. You can control the arrow visibility, and other attributes. The tooltip can display additional information when the user hovers over or focuses on an element.

Constant Summary

Constants inherited from Component

Component::ComponentObj

Instance Method Summary collapse

Methods inherited from Component

#add, #add_popover_or_tooltip, #anyicon, #element_name, #fx_id, #options, #random_id, #remove_class, #render_popover_or_tooltip, #target

Constructor Details

#initialize(**props) ⇒ TooltipComponent

Initializes the tooltip component with the given properties.

Parameters:

  • props (Hash) —

    The properties to customize the tooltip.

Options Hash (**props):

  • :has_arrow (Boolean) — default: true —

    Determines if an arrow should be displayed on the tooltip.

  • **props (Hash) —

    Remaining options declared as HTML attributes, applied to the tooltip container.



16
17
18
19
20
21
22
23
24
 
# File 'app/components/fluxbit/tooltip_component.rb', line 16

def initialize(**props)
  super
  @props = props
  @has_arrow = options @props.delete(:has_arrow), default: true
  @props["role"] = "tooltip"

  add(class: styles[:base], to: @props)
  @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
end

Instance Method Details

#arrow ⇒ Object 



33
34
35
36
37
 
# File 'app/components/fluxbit/tooltip_component.rb', line 33

def arrow
  return "" unless @has_arrow

  content_tag :div, "", "data-popper-arrow" => true, class: "tooltip-arrow"
end

#call ⇒ Object 



26
27
28
29
30
31
 
# File 'app/components/fluxbit/tooltip_component.rb', line 26

def call
  content_tag(:div, @props) do
    concat content
    concat arrow
  end
end