Tooltip

Description ​

Tooltip is a component used to display various tips and hints, and serves as a wrapper over the Popper component.

Differences between Tooltip and Dropdown:

• Tooltip appears only when hovering over the trigger.
• It includes an arrow pointing to the trigger.
• Tooltip contains only hints and additional information.

Component composition ​

Component consists of the following:

• Tooltip.Trigger
• Tooltip.Popper
• Tooltip.Title

Themes ​

Tooltip has three themes: default, invert for use on a dark background, and warning for validation messages. In all cases, the text color changes to --text-primary-invert, and the background color changes accordingly.

Tooltip themes

Theme	Appearance example	Styles
default		background-color: var(--tooltip-default), border: 1px solid var(--border-secondary), box-shadow: var(--box-shadow-popper)
invert		background-color: var(--tooltip-invert), border: 1px solid var(--border-tooltip-invert), box-shadow: var(--box-shadow-popper)
warning		background-color: var(--tooltip-warning), border: 1px solid var(--border-danger-active), box-shadow: var(--box-shadow-popper)

Maximum width and offset ​

By default, the Tooltip has a maximum width of 250px, but you can set a different width if needed.

Offset and arrow placement ​

The distance between the trigger and the tooltip is 4px.

The placement of the arrow depends on the placement property, refer to the live examples in the Placement section.

Paddings and margins ​

The content area of the tooltip has a default padding of 12px.

Content margins and paddings ​

The image inside the tooltip has a size of 130px * 130px.

Data margins ​

To improve readability, it is recommended to use specific margins between labels and values inside the tooltip. Detailed recommendations for tooltip margins can be found in Data visualization and Summary.

Placement ​

The tooltip is built using the Popper.js library, allowing you to change its placement according to the Popper API.

The tooltip's position shouldn't change when scrolling the page, ensuring it remains visible to the user. The default tooltip placement is top.

Placement properties ​

import React from 'react';
import { Box } from '@semcore/ui/flex-box';
import Button from '@semcore/ui/button';
import Tooltip from '@semcore/ui/tooltip';
import { Placement } from '@semcore/ui/popper';

const styleBox = {
  display: 'grid',
  gridTemplateRows: '1fr 1fr 1fr',
  gridTemplateColumns: '1fr 1fr 1fr',
  gridGap: '2vw',
  padding: '60px',
};

const Demo = () => {
  const placements: Placement[] = [
    'top-start',
    'top',
    'top-end',
    'left-start',
    'right-start',
    'left',
    'right',
    'left-end',
    'right-end',
    'bottom-start',
    'bottom',
    'bottom-end',
  ];
  return (
    <Box style={styleBox}>
      {placements.map((placement, i) => {
        return (
          <React.Fragment key={i}>
            {['right', 'right-start', 'right-end'].includes(placement) && <div />}
            <Tooltip placement={placement}>
              <Tooltip.Trigger tag={Button}>{placement.toLocaleUpperCase()}</Tooltip.Trigger>
              <Tooltip.Popper>Hi there!</Tooltip.Popper>
            </Tooltip>
          </React.Fragment>
        );
      })}
    </Box>
  );
};

import React from 'react';
import { Box } from '@semcore/ui/flex-box';
import Button from '@semcore/ui/button';
import Tooltip from '@semcore/ui/tooltip';
import { Placement } from '@semcore/ui/popper';

const styleBox = {
  display: 'grid',
  gridTemplateRows: '1fr 1fr 1fr',
  gridTemplateColumns: '1fr 1fr 1fr',
  gridGap: '2vw',
  padding: '60px',
};

const Demo = () => {
  const placements: Placement[] = [
    'top-start',
    'top',
    'top-end',
    'left-start',
    'right-start',
    'left',
    'right',
    'left-end',
    'right-end',
    'bottom-start',
    'bottom',
    'bottom-end',
  ];
  return (
    <Box style={styleBox}>
      {placements.map((placement, i) => {
        return (
          <React.Fragment key={i}>
            {['right', 'right-start', 'right-end'].includes(placement) && <div />}
            <Tooltip placement={placement}>
              <Tooltip.Trigger tag={Button}>{placement.toLocaleUpperCase()}</Tooltip.Trigger>
              <Tooltip.Popper>Hi there!</Tooltip.Popper>
            </Tooltip>
          </React.Fragment>
        );
      })}
    </Box>
  );
};

Interaction ​

For the tooltip trigger, you can use formatted text, table headers, or interactive components like Icon, Link, Button, etc.

Appearance and hiding ​

Tooltip's appearance and hiding

Hidden
Cursor leaves the trigger
Cursor leaves the trigger or the tooltip itself (for tooltip with control)

Delay of appearance and hiding ​

Default values for tooltip appearance and hiding:

• Appearance: 100ms
• Hiding: 50ms

If the tooltip has interactive elements inside, the hiding time should be increased to 100ms.

Content ​

Tooltip usually contains unformatted text.

In some cases (for example, for advertising purposes), you can format the text and add other components to the tooltip:

• Button, Link, etc.
• Image
• Different background color

Remember, the tooltip should only contain hints and tips.

Usage in UX/UI ​

Main recommendations:

• Use the tooltip to show hints and additional information, such as text, formatted text, lists, links, buttons, and small images.
• Ensure that the tooltip does not overlap important information for the user.

If the tooltip trigger conveys information about a new feature, avoid duplicating the trigger text in the tooltip title. The title may not be necessary if the trigger text already explains the tooltip content.

When the trigger isn’t clear enough, add a title to the tooltip. Additionally, include a title when the trigger doesn't adequately explain the topic of the tooltip. For example, you can describe additional conditions in the header or expand on the trigger's idea.

Divide long text into paragraphs.

Avoid overloading the tooltip with information. A large amount of content can be inconvenient to view in the tooltip. If there is too much content and nothing can be removed, consider using a separate paragraph on the page or widget instead of a tooltip.

Ensure that the tooltip does not prevent users from interacting with nearby triggers.