Tooltip

A tooltip is a element used in conjunction with the cursor or mouse pointer to display information about an item without needing to click on it.

Usage

Code Editor
Copy
import { Tooltip } from '@erudilabs/alma'

Types

Code Editor
Copy
import type { TooltipPlacementProps } from '@erudilabs/alma'
TooltipPlacementProps = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'

Component

Here preview and detail explain of Tooltip component


Default

Code Editor
Copy
<Tooltip content="ErudiFi is a financial technology.">
  <Button>Hover me!</Button>
</Tooltip>

Placement

Refers to the position or location where a tooltip appears in relation to its associated element or target, PS: The component will be detect possible possition when window resize


Top

Code Editor
Copy
<Tooltip content="ErudiFi is a financial technology." placement="top">
  <Button>Hover me!</Button>
</Tooltip>

Top start

Code Editor
Copy
<Tooltip content="ErudiFi is a financial technology." placement="top-start">
  <Button>Hover me!</Button>
</Tooltip>

Top end

Code Editor
Copy
<Tooltip content="ErudiFi is a financial technology." placement="top-end">
  <Button>Hover me!</Button>
</Tooltip>
 


Code Editor
Copy
<Tooltip content="A tooltip is a element used in conjunction with the cursor or mouse pointer to display information about an item without needing to click on it." placement="right">
  <Button>Hover me!</Button>
</Tooltip>

Right start

Code Editor
Copy
<Tooltip content="A tooltip is a element used in conjunction with the cursor or mouse pointer to display information about an item without needing to click on it." placement="right-start">
  <Button>Hover me!</Button>
</Tooltip>

Right end

Code Editor
Copy
<Tooltip content="A tooltip is a element used in conjunction with the cursor or mouse pointer to display information about an item without needing to click on it." placement="right-end">
  <Button>Hover me!</Button>
</Tooltip>

Bottom

Code Editor
Copy
<Tooltip content="ErudiFi is a financial technology." placement="bottom">
  <Button>Hover me!</Button>
</Tooltip>

Bottom start

Code Editor
Copy
<Tooltip content="ErudiFi is a financial technology." placement="bottom-start">
  <Button>Hover me!</Button>
</Tooltip>

Bottom end

Code Editor
Copy
<Tooltip content="ErudiFi is a financial technology." placement="bottom-end">
  <Button>Hover me!</Button>
</Tooltip>

Left

Code Editor
Copy
<Tooltip content="A tooltip is a element used in conjunction with the cursor or mouse pointer to display information about an item without needing to click on it." placement="left">
  <Button>Hover me!</Button>
</Tooltip>

Left start

Code Editor
Copy
<Tooltip content="A tooltip is a element used in conjunction with the cursor or mouse pointer to display information about an item without needing to click on it." placement="left-start">
  <Button>Hover me!</Button>
</Tooltip>

Left end

Code Editor
Copy
<Tooltip content="A tooltip is a element used in conjunction with the cursor or mouse pointer to display information about an item without needing to click on it." placement="left-end">
  <Button>Hover me!</Button>
</Tooltip>

Props Reference

Prop
Type

placemnet?

TooltipPlacementProps

testId?

string

className?

string

content

string