Class: Ariadne::TooltipComponent

Inherits:
Component
  • Object
show all
Defined in:
app/components/ariadne/tooltip_component.rb

Overview

Tooltip only appears on mouse hover or keyboard focus and contain a label or description text. Use tooltips sparingly and as a last resort.

When using a tooltip, follow the provided guidelines to avoid accessibility issues.

  • Tooltip text should be brief and to the point. The tooltip content must be a string.

  • Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never

use tooltips to convey critical information.

Constant Summary collapse

DEFAULT_TAG = 
:tooltip
DEFAULT_PLACEMENT = 
:top
VALID_PLACEMENTS = 
[DEFAULT_PLACEMENT, :right, :bottom, :left].freeze
DEFAULT_CLASSES = 
"ariadne-invisible ariadne-absolute ariadne-bg-slate-900 ariadne-text-white ariadne-font-semibold ariadne-max-w-xs ariadne-py-1 ariadne-px-2 ariadne-rounded z-max"
DATA_CONTROLLER = 
"tooltip-component"
DATA_ACTION = 
"mouseover->tooltip-component#show mouseout->tooltip-component#hide"
TYPE_DEFAULT = 
:description
TYPE_OPTIONS = 
[:label, TYPE_DEFAULT].freeze

Constants inherited from Component

Component::BASE_BODY_CLASSES, Component::BASE_HTML_CLASSES, Component::BASE_MAIN_CLASSES, Component::BASE_WRAPPER_CLASSES, Component::INVALID_ARIA_LABEL_TAGS

Constants included from ActionViewExtensions::FormHelper

ActionViewExtensions::FormHelper::DEFAULT_FORM_CLASSES

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::INTEGER_TYPES, FetchOrFallbackHelper::InvalidValueError, FetchOrFallbackHelper::TRUE_OR_FALSE

Instance Method Summary collapse

Methods included from ActionViewExtensions::FormHelper

#ariadne_form_with

Methods included from ClassNameHelper

#class_names

Methods included from LoggerHelper

#logger, #silence_deprecations?, #silence_warnings?

Methods included from FetchOrFallbackHelper

#check_incoming_attribute, #check_incoming_tag, #check_incoming_value, #fetch_or_raise, #fetch_or_raise_boolean, #fetch_or_raise_integer

Constructor Details

#initialize(tag: DEFAULT_TAG, for_id:, text:, type: TYPE_DEFAULT, direction: DEFAULT_PLACEMENT, classes: "", attributes: {}) ⇒ TooltipComponent

Returns a new instance of TooltipComponent.

Examples:

As a description for an icon-only button

@description
  If the tooltip content provides supplementary description, set `type: :description` to establish an `aria-describedby` relationship.
  The trigger element should also have a _concise_ accessible label via `aria-label`.
@code
  <%= render(Ariadne::HeroiconComponent.new(icon: :moon, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, attributes: { id: "bold-button-0" })) %>
  <%= render(Ariadne::TooltipComponent.new(for_id: "bold-button-0", type: :description, text: "Add bold text", direction: :top)) %>

As a label for an icon-only button

@description
  If the tooltip labels the icon-only button, set `type: :label`. This tooltip content becomes the accessible name for the button.
@code
  <%= render(Ariadne::ButtonComponent.new(attributes: { id: "like-button" })) { "👍" } %>
  <%= render(Ariadne::TooltipComponent.new(for_id: "like-button", type: :label, text: "Like", direction: :top)) %>

As a description for a button with visible label

@description
  If the button already has visible label text, the tooltip content is likely supplementary so set `type: :description`.
@code
  <%= render(Ariadne::ButtonComponent.new(attributes: {id: "save-button"}, scheme: :success)) { "Save" } %>
  <%= render(Ariadne::TooltipComponent.new(for_id: "save-button", type: :description, text: "This will immediately impact all organization members", direction: :right)) %>

With direction

@description
  Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
@code
  <%= render(Ariadne::ButtonComponent.new(attributes: {id: "North", m: 2})) { "North" } %>
  <%= render(Ariadne::TooltipComponent.new(for_id: "North", type: :description, text: "This is a North-facing tooltip, and is responsive.", direction: :top)) %>
  <%= render(Ariadne::ButtonComponent.new(attributes: {id: "South", m: 2})) { "South" } %>
  <%= render(Ariadne::TooltipComponent.new(for_id: "South", type: :description, text: "This is a South-facing tooltip and is responsive.", direction: :bottom)) %>
  <%= render(Ariadne::ButtonComponent.new(attributes: {id: "East", m: 2})) { "East" } %>
  <%= render(Ariadne::TooltipComponent.new(for_id: "East", type: :description, text: "This is a East-facing tooltip and is responsive.", direction: :right)) %>
  <%= render(Ariadne::ButtonComponent.new(attributes: {id: "West", m: 2})) { "West" } %>
  <%= render(Ariadne::TooltipComponent.new(for_id: "West""", type: :description, text: "This is a West-facing tooltip and is responsive.", direction: :left)) %>

With relative parent

@description
  When the tooltip and trigger element have a parent container with `relative: position`, it should not affect width of the tooltip.
@code
  <span style="position: relative;">
    <%= render(Ariadne::ButtonComponent.new(attributes: {id: "test-button"}, scheme: :info)) { "Test" } %>
    <%= render(Ariadne::TooltipComponent.new(for_id: "test-button", type: :description, text: "This tooltip should take up the full width", direction: :bottom)) %>
  </span>

Parameters:

  • tag (Symbol, String) (defaults to: DEFAULT_TAG) —

    The rendered tag name

  • for_id (String) —

    The ID of the element that the tooltip should be attached to.

  • text (String) —

    The text content of the tooltip. This should be brief and no longer than a sentence.

  • type (Symbol) (defaults to: TYPE_DEFAULT) —

    <%= one_of(Ariadne::TooltipComponent::TYPE_OPTIONS) %>

  • direction (Symbol) (defaults to: DEFAULT_PLACEMENT) —

    <%= one_of(Ariadne::TooltipComponent::VALID_PLACEMENTS) %>

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

    <%= link_to_classes_docs %>

  • attributes (Hash) (defaults to: {}) —

    <%= link_to_attributes_docs %>

Raises:

  • (TypeError) 


92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
# File 'app/components/ariadne/tooltip_component.rb', line 92

def initialize(tag: DEFAULT_TAG, for_id:, text:, type: TYPE_DEFAULT, direction: DEFAULT_PLACEMENT, classes: "", attributes: {})
  raise TypeError, "tooltip text must be a string" unless text.is_a?(String)

  @tag = check_incoming_tag(DEFAULT_TAG, tag)

  @text = text
  @classes = class_names(DEFAULT_CLASSES, classes)

  @attributes = attributes
  @attributes[:for] = for_id

  @attributes[:"data-tooltip-component-placement"] = fetch_or_raise(VALID_PLACEMENTS, direction)
  @attributes[:"data-type"] = fetch_or_raise(TYPE_OPTIONS, type)
  @attributes[:"data-tooltip-component-target"] = "tooltip"
end