Tooltip Component

[ergenekonyigit]

Design

Figma Design Document

Implementation

General usage example:

<Tooltip visible={true} >
   <Icon/>
</Tooltip>

Rules

• Default positioning for tooltip is on top of the component with 4px padding.
• Tooltip rearrange itself from its default position to be visible on the screen: Top (Default) and Bottom.
• The pin of the tooltip is centered on the component it opens.
• The width of the tooltip depends on the mobile screen size. Use full width with 16px padding from left and right.
• It is mandatory to use the close button to preserve the meaning of "it can be closed" on mobile devices.
• Clicking outside the tooltip, scrolling, and pressing the close button closes the tooltip.
• The tooltip can be opened by clicking on a specific area (component, icon, etc.) or after a certain period of time after the user lands on the screen.
• There can be text link in the tooltips.
• Opening a new tooltip immediately closes any other open tooltip.
• For the rich contents use Modal Component instead Tooltip.
• If the tooltip cannot be opened in the top position (for example: in the header and title on the page), it can be used in the bottom of the component.
• Should respect to contribution guideline

API Reference:

Tooltip component

Tooltips display informative text when users hover over, focus on, or tap an element.

Properties

Property	Description	Default Value
visible (boolean)	state of visibility	false
onClose (function)	close callback	-
content (string)	message of tooltip content	-