Tooltip
Usage
A Tooltip is a floating, non-actionable label used to explain a user interface element or feature in situations where it is not explicit enough. Tooltips display informative text when users hover over or focus on an element. The difference between tooltips and popover is that tooltips are used for identification purposes (short description), while Popovers are used for added description or information in the context (longer description, formatted text, and optional images or links). Another difference between these two is that while Tooltip appears when hovering over the element, and disappears when leaving the element; Popover appears on click on the element or the ‘info’ icon next to the element, and disappears only when user clicks elsewhere. In touch devices long-pressing activates the Tooltip.
Tooltips are used to:
Provide labels for unlabeled icons.
Provide additional information on a data point or element in a chart or table (not for critical information to a user to complete a task such as password character requirements).
Define new or unfamiliar UI elements that aren’t described directly in the user interface. For example, you can use a tooltip on a disabled button.
Tooltip is an optional property of every clickable component by default and can be enabled or disabled by developer in the component property. These include: Avatar Compact, Avatar Upload, Close Button, Link, App Button, Breadcrumb, Checkbox, Chips, Date picker, FAB, File Input, Menu Item, Number, Input, Numeric Stepper, Radio Select, Range Input, Select, Switch, Tab, Text Area, Text Input, Tree Item.
Types
Tooltip’s Tail can have 6 positions, hence there are 6 types of Tooltips to choose from, depending on where the designer wants the Tooltip to appear, in relation to the object it corresponds to.
Anatomy and Behavior
Container - contains the Label text of the Tooltip and its size is determined by it.
Label text - changes based on the use case. Note that the content should be clear and concise. Use the fewest number of words without sacrificing meaning. Only include a period at the end if the content is a full sentence.
Tail - is an element that should be positioned depending on where the designer wants the Tooltip to appear. The position of Tooltip relative to component shall be defined in the context of the application. By default it is in the Top-center. Tooltip should not cover the important adjacent UI elements, therefore its position is not static. Hence, the arrow that directs towards the element Tooltip corresponds to, should adapt its position. Tail can be in 6 different positions: top-left, top, top-right, bottom-right, bottom, bottom-left.
Behavior Continuously display the Tooltip as long as the user long-presses or hovers over the element. By default, tooltips have a 300ms entry delay when hovering over an object. Although this is the recommended delay time, we may customize it if needed. For example, if we need a Tooltip on an icon, and we would like for it to appear immediately on hover, we can set the delay to 0 ms. Display the Tooltip for another 1.5 seconds after the user leaves the element or takes another action.
States
Tooltip has no states, since it is not clickable.
Components Used In
Tooltip is built into the FormLabel component. Therefore all components that rely on FormLabel will have the Tooltip available by default. Additionally, Tooltip has been integrated into the following components, too:
Atoms
- Icon Displays tooltips for icons with additional information.
Molecules
AppButton Provides a tooltip for enhanced accessibility and description of button actions.
AvatarCompact Displays tooltips on avatar hover with details or user information.
FAB Adds tooltips for FAB to clarify its function.
IconButton Utilizes the tooltip for buttons with icons, adding clarity to the icon's purpose.
Link Shows a tooltip on hover for external or descriptive links.
Gaps and Sizes
- Padding vertical: 2XS
- Padding horizontal: S
- Width: Hug contents (element adapts to the contents’ width) and the max. width is 6XL after that text wraps down to the next line, with no hyphenation
- Height: Hug contents (element adapts to the contents’ height) and the max. height is 3XL (3 lines)
- Maximum count of characters allowed: 65
- Text alignment: Center
- Gap from the edge to the arrow in Tail positions Left-Top, Right-Top, Left-Bottom, Right-Bottom: 2XS
Tokens
Properties
ts
export type TooltipPosition = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
export interface TooltipProps {
tooltip?: string;
tooltipPosition?: TooltipPosition;
tooltipLines?: number;
}Configurations
Development Notes
Tooltip has been integrated into FormLabel with predefined positions and truncation limits. However, the tooltip can be customized per component using the corresponding Tooltip properties, i.e. tooltipPosition and tooltipLines.
This affects the following components:
CheckboxComboboxMultiselectNumberInputRadioSelectSelectSwitchTextInput
WARNING
Please note that when relying on the FormLabel built-in tooltip functionality, you MUST pass a label property or #label slot to the corresponding component in order for tooltip to work!
Furthermore, Tooltip has been integrated into the following components, too:
AppButtonAvatarCompactFABFilterGroupIconIconButtonLink
In order to use the built-in tooltip, you can simply pass a tooltip property to the supporting components.
vue
<script>
import { AppButton } from '@pohlcon/design-system';
</script>
<template>
<AppButton
tooltip="Click to submit the formular"
tooltipPosition="bottom-center"
:tooltipLines="2">
Submit
</AppButton>
</template>In contrast to that, you can use tooltip's named slot #tooltip.
vue
<script>
import { TextInput } from '@pohlcon/design-system';
const tooltip = ref('this is a slot tooltip');
const modelValue = ref('');
</script>
<template>
<TextInput
v-model="modelValue"
>
<template #tooltip>
{{ tooltip }}
</template>
</TextInput>
</template>Using the Tooltip Component Independently
In addition to its integration within certain components, the Tooltip component can also be used independently by wrapping other components or when you want to apply a tooltip to input components without a label property
INFO
When there is no label property passed to input components, they will not be wrapped by the FormLabel component and therefor its built-in Tooltip component will not be applied to these input components by default.
Here's an example of how to wrap an element with the Tooltip component:
vue
<template>
<Tooltip tooltip="This is additional information" tooltipPosition="top-center">
<CustomComponent />
</Tooltip>
</template>