{
    "componentChunkName": "component---src-layouts-rails-component-layout-tsx",
    "path": "/components/tooltip/rails/alpha",
    "result": {"data":{"primerRailsVersion":{"version":"0.24.1"},"sitePage":{"path":"/components/tooltip","context":{"frontmatter":{"title":"Tooltip","description":"Tooltips add additional context to interactive UI elements and appear on mouse hover or keyboard focus.","reactId":"tooltip","railsIds":["Primer::Alpha::Tooltip","Primer::Tooltip"],"figmaId":"tooltip","cssId":"tooltip"}}},"allRailsComponent":{"nodes":[{"railsId":"Primer::Alpha::ActionBar","status":"alpha"},{"railsId":"Primer::Alpha::ActionList","status":"alpha"},{"railsId":"Primer::Alpha::ActionMenu","status":"alpha"},{"railsId":"Primer::Alpha::AutoComplete","status":"deprecated"},{"railsId":"Primer::Alpha::Banner","status":"alpha"},{"railsId":"Primer::Alpha::ButtonMarketing","status":"alpha"},{"railsId":"Primer::Alpha::CheckBox","status":"alpha"},{"railsId":"Primer::Alpha::CheckBoxGroup","status":"alpha"},{"railsId":"Primer::Alpha::Dialog","status":"alpha"},{"railsId":"Primer::Alpha::Dropdown","status":"alpha"},{"railsId":"Primer::Alpha::FormButton","status":"alpha"},{"railsId":"Primer::Alpha::FormControl","status":"alpha"},{"railsId":"Primer::Alpha::HellipButton","status":"alpha"},{"railsId":"Primer::Alpha::HiddenTextExpander","status":"alpha"},{"railsId":"Primer::Alpha::Image","status":"alpha"},{"railsId":"Primer::Alpha::ImageCrop","status":"alpha"},{"railsId":"Primer::Alpha::Layout","status":"alpha"},{"railsId":"Primer::Alpha::Menu","status":"alpha"},{"railsId":"Primer::Alpha::MultiInput","status":"alpha"},{"railsId":"Primer::Alpha::NavList","status":"deprecated"},{"railsId":"Primer::Alpha::Navigation::Tab","status":"alpha"},{"railsId":"Primer::Alpha::OcticonSymbols","status":"alpha"},{"railsId":"Primer::Alpha::Overlay","status":"alpha"},{"railsId":"Primer::Alpha::RadioButton","status":"alpha"},{"railsId":"Primer::Alpha::RadioButtonGroup","status":"alpha"},{"railsId":"Primer::Alpha::SegmentedControl","status":"alpha"},{"railsId":"Primer::Alpha::Select","status":"alpha"},{"railsId":"Primer::Alpha::SubmitButton","status":"alpha"},{"railsId":"Primer::Alpha::TabContainer","status":"alpha"},{"railsId":"Primer::Alpha::TabNav","status":"alpha"},{"railsId":"Primer::Alpha::TabPanels","status":"alpha"},{"railsId":"Primer::Alpha::TextArea","status":"alpha"},{"railsId":"Primer::Alpha::TextField","status":"alpha"},{"railsId":"Primer::Alpha::ToggleSwitch","status":"alpha"},{"railsId":"Primer::Alpha::Tooltip","status":"alpha"},{"railsId":"Primer::Alpha::UnderlineNav","status":"alpha"},{"railsId":"Primer::Alpha::UnderlinePanels","status":"alpha"},{"railsId":"Primer::Beta::AutoComplete","status":"beta"},{"railsId":"Primer::Beta::Avatar","status":"beta"},{"railsId":"Primer::Beta::AvatarStack","status":"beta"},{"railsId":"Primer::Beta::BaseButton","status":"beta"},{"railsId":"Primer::Beta::Blankslate","status":"beta"},{"railsId":"Primer::Beta::BorderBox","status":"beta"},{"railsId":"Primer::Beta::Breadcrumbs","status":"beta"},{"railsId":"Primer::Beta::Button","status":"beta"},{"railsId":"Primer::Beta::ButtonGroup","status":"beta"},{"railsId":"Primer::Beta::ClipboardCopy","status":"beta"},{"railsId":"Primer::Beta::ClipboardCopyBaseButton","status":"beta"},{"railsId":"Primer::Beta::ClipboardCopyButton","status":"beta"},{"railsId":"Primer::Beta::CloseButton","status":"beta"},{"railsId":"Primer::Beta::Counter","status":"beta"},{"railsId":"Primer::Beta::Details","status":"beta"},{"railsId":"Primer::Beta::Flash","status":"deprecated"},{"railsId":"Primer::Beta::Heading","status":"beta"},{"railsId":"Primer::Beta::IconButton","status":"beta"},{"railsId":"Primer::Beta::Label","status":"beta"},{"railsId":"Primer::Beta::Link","status":"beta"},{"railsId":"Primer::Beta::Markdown","status":"beta"},{"railsId":"Primer::Beta::NavList","status":"beta"},{"railsId":"Primer::Beta::Octicon","status":"beta"},{"railsId":"Primer::Beta::Popover","status":"beta"},{"railsId":"Primer::Beta::ProgressBar","status":"beta"},{"railsId":"Primer::Beta::RelativeTime","status":"beta"},{"railsId":"Primer::Beta::Spinner","status":"beta"},{"railsId":"Primer::Beta::State","status":"beta"},{"railsId":"Primer::Beta::Subhead","status":"beta"},{"railsId":"Primer::Beta::Text","status":"beta"},{"railsId":"Primer::Beta::TimelineItem","status":"beta"},{"railsId":"Primer::Beta::Truncate","status":"beta"},{"railsId":"Primer::BlankslateComponent","status":"deprecated"},{"railsId":"Primer::Box","status":"stable"},{"railsId":"Primer::ButtonComponent","status":"deprecated"},{"railsId":"Primer::ConditionalWrapper","status":"alpha"},{"railsId":"Primer::Content","status":"stable"},{"railsId":"Primer::IconButton","status":"deprecated"},{"railsId":"Primer::LayoutComponent","status":"deprecated"},{"railsId":"Primer::Navigation::TabComponent","status":"deprecated"},{"railsId":"Primer::Tooltip","status":"deprecated"},{"railsId":"Primer::Truncate","status":"deprecated"},{"railsId":"Primer::BaseComponent","status":null}]},"railsComponent":{"name":"Tooltip","railsId":"Primer::Alpha::Tooltip","description":"`Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text. Use tooltips sparingly and as a last resort.\nUse tooltips as a last resort. Please consider [Tooltips alternatives](https://primer.style/design/accessibility/tooltip-alternatives).\n\nWhen using a tooltip, follow the provided guidelines to avoid accessibility issues:\n- 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.\n- `Tooltip` should be rendered through the API of {{#link_to_component}}Primer::ButtonComponent{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}, or {{#link_to_component}}Primer::IconButton{{/link_to_component}}. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).\n- Tooltip text must be brief and concise even when used to display a description.\n- Tooltips can only hold string content.\n- Tooltips are not allowed on `disabled` elements because such elements are not keyboard-accessible. If you must set a tooltip on a disabled element, use `aria-disabled=\"true\"` instead and programmatically disable the element.\n- **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only\nand screen reader users. Use of tooltips through {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}, or {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}} will guarantee this.\n- If you must use `Tooltip` as a standalone component, place it immediately after the trigger element in the DOM. This allows screen reader users to navigate to the tooltip and copy its contents if desired.\n  content.\n\nSemantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either a\n`aria-labelledby` or an `aria-describedby` association. The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:\n- When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set `type: :description`.\nThe majority of tooltips will fall under this category.\n- When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.\n`label` type is usually only appropriate for an icon-only control.","status":"alpha","a11y_reviewed":false,"short_name":"Tooltip","is_form_component":false,"accessibility_docs":null,"props":[{"name":"for_id","type":"String","description":"The ID of the element that the tooltip should be attached to.","default":"N/A"},{"name":"type","type":"Symbol","description":"One of `:description` or `:label`.","default":"N/A"},{"name":"direction","type":"Symbol","description":"One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`.","default":"`:s`"},{"name":"text","type":"String","description":"The text content of the tooltip. This should be brief and no longer than a sentence.","default":"N/A"},{"name":"system_arguments","type":"Hash","description":"{{link_to_system_arguments_docs}}","default":"N/A"}],"slots":[],"methods":[{"name":"id","description":"Returns the value of attribute id.","parameters":[]}],"previews":[{"name":"playground","preview_path":"primer/alpha/tooltip/playground"},{"name":"default","preview_path":"primer/alpha/tooltip/default"},{"name":"description_tooltip_on_button_with_existing_describedby","preview_path":"primer/alpha/tooltip/description_tooltip_on_button_with_existing_describedby"},{"name":"with_right_most_position","preview_path":"primer/alpha/tooltip/with_right_most_position"},{"name":"with_multiple_on_a_page","preview_path":"primer/alpha/tooltip/with_multiple_on_a_page"},{"name":"tooltip_with_button","preview_path":"primer/alpha/tooltip/tooltip_with_button"},{"name":"tooltip_with_link","preview_path":"primer/alpha/tooltip/tooltip_with_link"},{"name":"tooltip_with_icon_button","preview_path":"primer/alpha/tooltip/tooltip_with_icon_button"},{"name":"tooltip_inside_primer_overlay","preview_path":"primer/alpha/tooltip/tooltip_inside_primer_overlay"},{"name":"tooltip_with_dialog_moving_focus_to_input","preview_path":"primer/alpha/tooltip/tooltip_with_dialog_moving_focus_to_input"},{"name":"tooltip_n","preview_path":"primer/alpha/tooltip/tooltip_n"},{"name":"tooltip_s","preview_path":"primer/alpha/tooltip/tooltip_s"},{"name":"tooltip_e","preview_path":"primer/alpha/tooltip/tooltip_e"},{"name":"tooltip_w","preview_path":"primer/alpha/tooltip/tooltip_w"},{"name":"tooltip_se","preview_path":"primer/alpha/tooltip/tooltip_se"},{"name":"tooltip_sw","preview_path":"primer/alpha/tooltip/tooltip_sw"},{"name":"tooltip_ne","preview_path":"primer/alpha/tooltip/tooltip_ne"},{"name":"tooltip_nw","preview_path":"primer/alpha/tooltip/tooltip_nw"}],"subcomponents":[]}},"pageContext":{"componentId":"Primer::Alpha::Tooltip","parentPath":"/components/tooltip"}},
    "staticQueryHashes": ["1056354862","2102389209","2745756513","2790671566","2939673985","3235046957","3907230164"]}