Class: Yattho::Alpha::Tooltip
- Defined in:
- app/components/yattho/alpha/tooltip.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. Use tooltips as a last resort. Please consider [Tooltips alternatives](yattho.com/design/accessibility/tooltip-alternatives).
When using a tooltip, follow the provided guidelines to avoid accessibility issues:
-
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.
-
‘Tooltip` should be rendered through the API of <%= link_to_component(Yattho::ButtonComponent)%>, <%= link_to_component(Yattho::Beta::Link)%>, or <%= link_to_component(Yattho::IconButton)%>. Avoid using `Tooltip` a standalone component unless absolutely necessary (and only on interactive elements).
Constant Summary collapse
- DIRECTION_DEFAULT =
:s
- DIRECTION_OPTIONS =
[DIRECTION_DEFAULT, :n, :e, :w, :ne, :nw, :se, :sw].freeze
- TYPE_FALLBACK =
:description
- TYPE_OPTIONS =
[:label, :description].freeze
Constants inherited from Component
Component::INVALID_ARIA_LABEL_TAGS
Constants included from Status::Dsl
Constants included from ViewHelper
Constants included from TestSelectorHelper
TestSelectorHelper::TEST_SELECTOR_TAG
Constants included from FetchOrFallbackHelper
FetchOrFallbackHelper::InvalidValueError
Instance Method Summary collapse
- #call ⇒ Object
-
#initialize(type:, for_id:, text:, direction: DIRECTION_DEFAULT, **system_arguments) ⇒ Tooltip
constructor
A new instance of Tooltip.
Methods inherited from Component
Methods included from JoinStyleArgumentsHelper
Methods included from TestSelectorHelper
Methods included from FetchOrFallbackHelper
#fetch_or_fallback, #fetch_or_fallback_boolean, #silence_deprecations?
Methods included from ClassNameHelper
Constructor Details
#initialize(type:, for_id:, text:, direction: DIRECTION_DEFAULT, **system_arguments) ⇒ Tooltip
Returns a new instance of Tooltip.
105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
# File 'app/components/yattho/alpha/tooltip.rb', line 105 def initialize(type:, for_id:, text:, direction: DIRECTION_DEFAULT, **system_arguments) raise TypeError, "tooltip text must be a string" unless text.is_a?(String) @text = text @system_arguments = system_arguments @system_arguments[:id] ||= self.class.generate_id @system_arguments[:tag] = :'tool-tip' @system_arguments[:for] = for_id @system_arguments[:classes] = class_names( @system_arguments[:classes], "sr-only" ) @system_arguments[:position] = :absolute @system_arguments[:'data-direction'] = fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT).to_s @system_arguments[:'data-type'] = fetch_or_fallback(TYPE_OPTIONS, type, TYPE_FALLBACK).to_s end |
Instance Method Details
#call ⇒ Object
122 123 124 |
# File 'app/components/yattho/alpha/tooltip.rb', line 122 def call render(Yattho::BaseComponent.new(**@system_arguments)) { @text } end |