Class: Yattho::Tooltip

Inherits:
Component
  • Object
show all
Defined in:
app/components/yattho/tooltip.rb

Overview

‘Tooltip` is a wrapper component that will apply a tooltip to the provided content.

Constant Summary collapse

DIRECTION_DEFAULT = 
:n
ALIGN_DEFAULT = 
:default
MULTILINE_DEFAULT = 
false
DELAY_DEFAULT = 
false
ALIGN_MAPPING = 
{
  ALIGN_DEFAULT => "",
  :left_1 => "tooltipped-align-left-1",
  :right_1 => "tooltipped-align-right-1",
  :left_2 => "tooltipped-align-left-2",
  :right_2 => "tooltipped-align-right-2"
}.freeze
DIRECTION_OPTIONS = 
[DIRECTION_DEFAULT] + %i[
  nw
  ne
  w
  e
  sw
  s
  se
]

Constants inherited from Component

Component::INVALID_ARIA_LABEL_TAGS

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Constants included from TestSelectorHelper

Yattho::TestSelectorHelper::TEST_SELECTOR_TAG

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError

Instance Method Summary collapse

Methods inherited from Component

deprecated?, generate_id

Methods included from JoinStyleArgumentsHelper

#join_style_arguments

Methods included from TestSelectorHelper

#add_test_selector

Methods included from FetchOrFallbackHelper

#fetch_or_fallback, #fetch_or_fallback_boolean, #silence_deprecations?

Methods included from ClassNameHelper

#class_names

Constructor Details

#initialize(label:, direction: DIRECTION_DEFAULT, align: ALIGN_DEFAULT, multiline: MULTILINE_DEFAULT, no_delay: DELAY_DEFAULT, **system_arguments) ⇒ Tooltip

Returns a new instance of Tooltip.

Examples:

Default

<div class="pt-5">
  <%= render(Yattho::Tooltip.new(label: "Even bolder")) { "Default Bold Text" } %>
</div>

Wrapping another component

<div class="pt-5">
  <%= render(Yattho::Tooltip.new(label: "Even bolder")) do %>
    <%= render(Yattho::ButtonComponent.new) { "Bold Button" } %>
  <% end %>
</div>

With a direction

<div class="pt-5">
  <%= render(Yattho::Tooltip.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>
</div>

With an alignment

<div class="pt-5">
  <%= render(Yattho::Tooltip.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>
</div>

Without a delay

<div class="pt-5">
  <%= render(Yattho::Tooltip.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>
</div>

Parameters:

  • label (String) —

    the text to appear in the tooltip

  • direction (String) (defaults to: DIRECTION_DEFAULT) —

    Direction of the tooltip. <%= one_of(Yattho::Tooltip::DIRECTION_OPTIONS) %>

  • align (String) (defaults to: ALIGN_DEFAULT) —

    Align tooltips to the left or right of an element, combined with a ‘direction` to specify north or south. <%= one_of(Yattho::Tooltip::ALIGN_MAPPING.keys) %>

  • multiline (Boolean) (defaults to: MULTILINE_DEFAULT) —

    Use this when you have long content

  • no_delay (Boolean) (defaults to: DELAY_DEFAULT) —

    By default the tooltips have a slight delay before appearing. Set true to override this

  • system_arguments (Hash) —

    <%= link_to_system_arguments_docs %>



64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
# File 'app/components/yattho/tooltip.rb', line 64

def initialize(
  label:,
  direction: DIRECTION_DEFAULT,
  align: ALIGN_DEFAULT,
  multiline: MULTILINE_DEFAULT,
  no_delay: DELAY_DEFAULT,
  **system_arguments
)
  @system_arguments = system_arguments
  @system_arguments[:tag] ||= :span # rubocop:disable Yattho/NoTagMemoize
  @system_arguments[:aria] = { label: label }
  @system_arguments[:skip_aria_label_check] = true

  @system_arguments[:classes] = class_names(
    @system_arguments[:classes],
    "tooltipped",
    "tooltipped-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
    ALIGN_MAPPING[fetch_or_fallback(ALIGN_MAPPING.keys, align, ALIGN_DEFAULT)],
    "tooltipped-no-delay" => fetch_or_fallback_boolean(no_delay, DELAY_DEFAULT),
    "tooltipped-multiline" => fetch_or_fallback_boolean(multiline, MULTILINE_DEFAULT)
  )
end

Instance Method Details

#call ⇒ Object 



87
88
89
 
# File 'app/components/yattho/tooltip.rb', line 87

def call
  render(Yattho::BaseComponent.new(**@system_arguments)) { content }
end