Developer mode
Opens components on the React tab by default.
Your bookmarks

Tooltip

Shows additional context on tap or hover.

Some people find it’s the details of a trip that make it worth taking. Sometimes those details distract people from making decisions about their trip. You always have a limited amount of space to present information before it becomes overwhelming.

To include context for those who want it but keep it hidden from those who don’t, use a tooltip to show users there’s something more to learn. Tooltips can also add detailed explanations for icons without a visible label. Get users’ attention with relevant text or icons, but keep the fine print out of the way of the main flow.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Content structure

Close button: closes tooltip on mobile; content: adds static info for context or additional help; tooltip indicator: indicates when text is wrapped in a tooltip; arrow: points to child on desktop and optionally can be set with preferred position and alignment.

Guidelines

Indicate the tooltip is present

Tooltips are great for keeping information initially hidden. In order for users to access it, they need to know it’s there.

Use icons, the natural indication of underlined text, or pointing text like “learn more”. Whatever you do, make sure users know they can take an action to get more information.

import Alert from "@kiwicom/orbit-components/lib/Alert";
import Heading from "@kiwicom/orbit-components/lib/Heading";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Text from "@kiwicom/orbit-components/lib/Text";
import Tooltip from "@kiwicom/orbit-components/lib/Tooltip";
import CheckCircle from "@kiwicom/orbit-components/lib/icons/CheckCircle";
import Visa from "@kiwicom/orbit-components/lib/icons/Visa";
() => (
  <Stack>
    <Text>
      If you&apos;re building a travel app, you should give{" "}
      <Tooltip
        content={
          <Stack>
            <Heading inverted as="h3" type="title3">
              Orbit design system
            </Heading>
            <Text>
              An open source design system for your next travel project.
            </Text>
          </Stack>
        }
      >
        <Text>Orbit</Text>
      </Tooltip>{" "}
      a try.
    </Text>
    <Alert icon={<CheckCircle />} type="success">
      If you&apos;re building a travel app, you should give{" "}
      <Tooltip
        content={
          <Stack>
            <Heading inverted as="h3" type="title3">
              Orbit design system
            </Heading>
            <Text>
              An open source design system for your next travel project.
            </Text>
          </Stack>
        }
      >
        <Text>Orbit</Text>
      </Tooltip>{" "}
      a try.
    </Alert>
    <Alert icon={<Visa />} type="warning">
      You{" "}
      <Tooltip content={<Text>Check with your embassy.</Text>}>
        <Text>may need a visa</Text>
      </Tooltip>{" "}
      for your trip.
    </Alert>
    <Text>
      The following text has a tooltip:{" "}
      <Tooltip
        removeUnderlinedText
        content={
          <Stack>
            <Heading inverted as="h3" type="title3">
              Orbit design system
            </Heading>
            <Text>
              An open source design system for your next travel project.
            </Text>
          </Stack>
        }
      >
        <Text>Orbit</Text>
      </Tooltip>
    </Text>
  </Stack>
)

Keep it simple       

Tooltips can contain any kind of content you want. You can include pictures, lists, and more.

Of course, just because you can do something, doesn’t mean you should. Tooltips have little space to show everything and too much at once can be overwhelming. 

If you have a lot to say, consider including a text link to more information to continue the pattern of progressive disclosure. Or if you have structured information, consider a modal to present it all.

Explain disabled actions

Although it’s best to avoid disabled actions, sometimes they can’t be avoided. And sometimes seeing them can encourage users to continue a flow. In such cases, users need to know how they can progress past the disabled state. A good way to do that is with tooltips.

Keep the text short and focused on the actions users need to take.

Select a flight before continuing.
Enter a valid passport number.
Earn $50 in credits before cashing out.
You can’t currently click this button because you haven’t yet selected a flight.
The passport number you entered did not pass our validation checks.
You must have accumulated at least $50 in credits before you are able to cash out the credits into your bank account.
import Button from "@kiwicom/orbit-components/lib/Button";
import Text from "@kiwicom/orbit-components/lib/Text";
import Tooltip from "@kiwicom/orbit-components/lib/Tooltip";
() => (
  <Tooltip content={<Text>Select a flight before continuing.</Text>}>
    <Button disabled>Book</Button>
  </Tooltip>
)

Look & feel

Desktop vs. mobile

Hovering over text is a natural user pattern on desktops. On desktops, users are used to seeing an indication there’s a tooltip and moving their mouse over it to learn more. So it’s natural to have the tooltip popup in context.

Users of mobile devices don’t have the same option. There’s also a lot less space on mobile devices to display tooltips next to text. 

So on mobile devices, open tooltips look somewhat like small, black modals at the bottom of the screen. This clearly distinguishes them from the initial text while leaving enough context under the overlay. A close button is automatically included so users can easily get back to their main flow.

Related components

Dialog

Tooltips are great for small bits of static information. For small bits of information connected to a single action, consider a dialog.

Modal

Tooltips have space for a small amount of information. For anything that requires more information or structure, use a modal.

Popover

Tooltips shine at small bits of explanatory information. If you want to include small interactions or choices, use a popover.

Collapse

Tooltips add additional explanations on top of the context of the current screen. If you’d like to add the additional information to the screen itself, look into using a collapse.