The Fluxbit::TooltipComponent is a customizable tooltip component that extends Fluxbit::Component. It allows you to display contextual information when users hover over or focus on elements, with support for arrow indicators and custom positioning.

To start using the tooltip you can use the default way to call the component:

<%= render Fluxbit::TooltipComponent.new.with_content('Tooltip content') %>

<!-- or -->

<%= render Fluxbit::TooltipComponent.new do %>
    Tooltip content
<% end %>

or you can use the alias (from the helpers):

<%= fx_tooltip(with_content: 'Tooltip content') %>

<!-- or -->

<%= fx_tooltip do %>
    Tooltip content
<% end %>

The result is:

Options

Param Default Description
has_arrow: true Determines if an arrow should be displayed on the tooltip.
remove_class: ”” Classes to be removed from the default class list.
**props   Additional HTML attributes.

Slots

This component does not define any named slots. The content for the tooltip is provided through the default block:

<%= render Fluxbit::TooltipComponent.new do %>
  This is the tooltip content
<% end %>

Examples

Basic tooltip

Tooltip without arrow

Tooltip with HTML content

Tooltip positioning

Interactive tooltip with buttons

Adding/Removing classes

Adding other properties

Customization

You can customize the appearance and behavior of this component by passing different initialization parameters and adding custom styles. To do this you can create a initializer file like the:

# /config/initializers/change_tooltip_component_defaults.rb

Fluxbit::Config::TooltipComponent.styles[:base] = 'absolute z-10 invisible inline-block px-2 py-1 text-xs font-normal text-white bg-black rounded shadow-sm opacity-0 tooltip' # Custom styling

Dependencies

  • Flowbite: Used for tooltip positioning and behavior.
  • Tailwind CSS: Used for styling the component.
  • Floating UI: Used for advanced positioning (via Flowbite).

Styles 

<%= html_escape(JSON.pretty_generate(Fluxbit::Config::TooltipComponent.styles)) %>

References

Flowbite Tooltips