Tooltip

Documentation for the <Tooltip /> component. Learn about the available props and how to use it.

Installation

To get started, install @exponentialeducation/tooltip via yarn:

# Yarn


yarn add @exponentialeducation/tooltip

Basic Example

Tooltip use it for showing additional information during hover interactions.

{/* ... */}


import { Tooltip } from '@exponentialeducation/tooltip';


function IndexPage() {
  return (
    <main>
      {/* ... */}


      <div className="mt-5 text-center">
        Inline text can have
        <Tooltip placement="top" content="Tooltip content">
          <span className="cursor-default italic border-primary-500 border-b-2 border-dashed">
            a tooltip
          </span>
        </Tooltip>
      </div>


      {/* ... */}
    </main>
  )
}
Inline text can have a tooltip

Placements

You can change the tooltip placement (see the placement prop to see all the valid options)

{/* ... */}


import { Tooltip } from '@exponentialeducation/tooltip';


function IndexPage() {
  return (
    <main>
      {/* ... */}


      <Tooltip placement="left" content="Tooltip content">
        <span className="cursor-default border-primary-500 border-b-2 border-dashed">
          Available
        </span>
      </Tooltip>
      <Tooltip placement="top" content="Tooltip content">
        <span className="cursor-default border-primary-500 border-b-2 border-dashed">
          in the full
        </span>
      </Tooltip>
      <Tooltip placement="bottom" content="Tooltip content">
        <span className="cursor-default border-primary-500 border-b-2 border-dashed">
          range of
        </span>
      </Tooltip>
      <Tooltip placement="right" content="Tooltip content">
        <span className="cursor-default border-primary-500 border-b-2 border-dashed">
          visual intents
        </span>
      </Tooltip>


      {/* ... */}
    </main>
  )
}
Inline text can have a tooltip
Or, hover anywhere over this whole line.
Available in the full range of visual intents

Disabled

import { Tooltip } from '@exponentialeducation/tooltip';


function IndexPage() {
  return (
    <div className="w-full mt-5">
      {/* ... */}


      <div className="mt-5 text-center">
        This line's tooltip
        <Tooltip disabled placement="top" content="Tooltip content">
          <span className="cursor-default italic border-primary-500 border-b-2 border-dashed">
            is disabled
          </span>
        </Tooltip>
      </div>


      {/* ... */}
    </div>
  );
}
This line's tooltip is disabled

Props

prop

description

children

node Tooltip reference element

content

string The content that will be displayed inside of the tooltip.

disabled?

boolean = "false" Prevents the tooltip from appearing when true

gap?

number = 12 The space between reference element and tooltip

placement?

"top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-start" | "bottom" | "bottom-end" | "left-start" | "left" | "left-end" = "bottom"` The placement (relative to the target) at which the tooltip should appear.