Develop ultra fast with Prismane 🎉
Logo
Quick Search...

Tooltip

Tooltip display a container that shows additional information on hover.
Category: Overlay Source

Import

 
import { Tooltip } from "@prismane/core";

Usage

 
<Tooltip label="This is the tooltip information">
  <Button>Hover to see the tooltip</Button>
</Tooltip>

Tooltip Positions

 
<>
  <Tooltip label="Fire!" position="right-start">
    <ActionButton icon={<Fire />} />
  </Tooltip>
  <Tooltip label="Fire!" position="right">
    <ActionButton icon={<Fire />} />
  </Tooltip>
  <Tooltip label="Fire!" position="right-end">
    <ActionButton icon={<Fire />} />
  </Tooltip>
  <Tooltip label="Fire!" position="left-start">
    <ActionButton icon={<Fire />} />
  </Tooltip>
  <Tooltip label="Fire!" position="left">
    <ActionButton icon={<Fire />} />
  </Tooltip>
  <Tooltip label="Fire!" position="left-end">
    <ActionButton icon={<Fire />} />
  </Tooltip>
  <Tooltip label="Fire!" position="bottom-start">
    <ActionButton icon={<Fire />} />
  </Tooltip>
  <Tooltip label="Fire!" position="bottom">
    <ActionButton icon={<Fire />} />
  </Tooltip>
  <Tooltip label="Fire!" position="bottom-end">
    <ActionButton icon={<Fire />} />
  </Tooltip>
  <Tooltip label="Fire!" position="top-start">
    <ActionButton icon={<Fire />} />
  </Tooltip>
  <Tooltip label="Fire!" position="top">
    <ActionButton icon={<Fire />} />
  </Tooltip>
  <Tooltip label="Fire!" position="top-end">
    <ActionButton icon={<Fire />} />
  </Tooltip>
</>

Tooltip Colors

 
<>
  <Tooltip label="Fire!" color="ruby">
    <ActionButton icon={<Fire />} />
  </Tooltip>
  <Tooltip label="Fire!" color="teal">
    <ActionButton icon={<Fire />} />
  </Tooltip>
  <Tooltip label="Fire!" color="primary">
    <ActionButton icon={<Fire />} />
  </Tooltip>
</>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

Go BackToaster
Up NextTransition