Tooltip

Getting Started

Forms

Typography

Utilities

Visualization Components

Wrap any component with a Tooltip to provide more information to a user. This component is based on the Tippy library. Any of the options can be passed as props to adjust the tooltip behavior.

Props

Examples

The default usage passes in a string as the content prop

<Tooltip content="Default Tooltip">
  <NavIcon icon="calendar" />
</Tooltip><Tooltip content="Default Tooltip">
  <NavIcon icon="calendar" />
</Tooltip>

The content prop is passed in as an Element

<Tooltip
  placement="bottom"
  content={
    <div className="d-inline-flex align-items-center pl-1 pr-1">
      <Icon icon="settings" /> Element passed as Content
    </div>
  }
  theme="light"
>
  <NavIcon icon="calendar" />
</Tooltip><Tooltip
  placement="bottom"
  content={
    <div className="d-inline-flex align-items-center pl-1 pr-1">
      <Icon icon="settings" /> Element passed as Content
    </div>
  }
  theme="light"
>
  <NavIcon icon="calendar" />
</Tooltip>

Interactive Tooltips

By default when the user tries to interact with a Tooltip it will disappear. By passing the interactive prop you can click and interact with the tooltip without it disappearing.

<Tooltip content="Normal Tooltip">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="Interactive Tooltip" interactive>
  <NavIcon icon="calendar" />
</Tooltip><Tooltip content="Normal Tooltip">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="Interactive Tooltip" interactive>
  <NavIcon icon="calendar" />
</Tooltip>

By default the width of the Tooltip is dynamic based on content. By passing maxWidth with a string or number you can set the width of the Tooltip.

<Tooltip
  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.p"
  maxWidth={200}
>
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip
  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  maxWidth="250px"
>
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip
  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  maxWidth="10em"
>
  <NavIcon icon="calendar" />
</Tooltip><Tooltip
  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.p"
  maxWidth={200}
>
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip
  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  maxWidth="250px"
>
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip
  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  maxWidth="10em"
>
  <NavIcon icon="calendar" />
</Tooltip>

By default the placement prop is set to the bottom of the element. Here you may change the the placement of the Tooltip.

<Tooltip content="top Placement" placement="top">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="top-start Placement" placement="top-start">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="top-end Placement" placement="top-end">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="bottom Placement" placement="bottom">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="bottom-start Placement" placement="bottom-start">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="bottom-end Placement" placement="bottom-end">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="left Placement" placement="left">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="left-start Placement" placement="left-start">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="left-end Placement" placement="left-end">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="right Placement" placement="right">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="right-start Placement" placement="right-start">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="right-end Placement" placement="right-end">
  <NavIcon icon="calendar" />
</Tooltip><Tooltip content="top Placement" placement="top">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="top-start Placement" placement="top-start">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="top-end Placement" placement="top-end">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="bottom Placement" placement="bottom">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="bottom-start Placement" placement="bottom-start">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="bottom-end Placement" placement="bottom-end">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="left Placement" placement="left">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="left-start Placement" placement="left-start">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="left-end Placement" placement="left-end">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="right Placement" placement="right">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="right-start Placement" placement="right-start">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="right-end Placement" placement="right-end">
  <NavIcon icon="calendar" />
</Tooltip>

By default the theme prop is set to Dark.

<Tooltip content="Dark Theme Tooltip" theme="dark">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="Light Theme Tooltip" theme="light">
  <NavIcon icon="calendar" />
</Tooltip><Tooltip content="Dark Theme Tooltip" theme="dark">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="Light Theme Tooltip" theme="light">
  <NavIcon icon="calendar" />
</Tooltip>

Tooltip Triggers

By passing the trigger prop you can change how a Tooltip is triggered.

<Tooltip content="Mouse Enter Trigger Tooltip" trigger="mouseenter">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="Click Trigger Tooltip" trigger="click">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="Focus Trigger Tooltip" trigger="focus">
  <NavIcon icon="calendar" />
</Tooltip><Tooltip content="Mouse Enter Trigger Tooltip" trigger="mouseenter">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="Click Trigger Tooltip" trigger="click">
  <NavIcon icon="calendar" />
</Tooltip>
<Tooltip content="Focus Trigger Tooltip" trigger="focus">
  <NavIcon icon="calendar" />
</Tooltip>

Tooltip

Props

Examples

Default Tooltip

Tooltip with Content

Interactive Tooltips

Tooltip Max Width

Tooltip Placement

Tooltip Themes

Tooltip Triggers

Tooltip

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Props