Tooltip

yarn add @clayui/tooltip

Tooltips are brief pieces of information that appear on hover state over an element to clarify its meaning or use for the user.

React Component
CSS / Markup

Stable 3.3.1 View in Lexicon CHANGELOG

TooltipProvider
- contentRenderer
API

Simplest way of using Tooltip is by leveraging it's show prop and specifying alignPosition to determine it's position relative to the element it's aligned to.

If you have multiple Tooltips on the page, TooltipProvider allows you to only have to instantiate the component once and simply provide html attributes to the elements that need tooltips.

import ClayTooltip from '@clayui/tooltip';

import ClayTooltip from '@clayui/tooltip';

const Component = () => (
  <div style={{ height: 50 }}>
    <ClayTooltip alignPosition="bottom" show>
      {"Tooltip content"}
    </ClayTooltip>
  </div>
);

render(<Component />);

const Component = () => (
  <div style={{ height: 50 }}>
    <ClayTooltip alignPosition="bottom" show>
      {"Tooltip content"}
    </ClayTooltip>
  </div>
);
render(<Component />);

TooltipProvider

By using the <TooltipProvider> it allows you to add the desired tooltip content on each element as a data attribute.

Here's a list of html attributes that you can provide to children elements of the TooltipProvider:

title is for the tooltip content.
data-tooltip-align is for alignment direction.
data-tooltip-delay is for the delay(ms) before showing the tooltip.

import {ClayTooltipProvider} from '@clayui/tooltip';

import {ClayTooltipProvider} from '@clayui/tooltip';

const Component = () => (
  <ClayTooltipProvider>
    <div>
      <button data-tooltip-align="top" title="Tooltip Content">
        {"Hover"}
      </button>
    </div>
  </ClayTooltipProvider>
);

render(<Component />);

const Component = () => (
  <ClayTooltipProvider>
    <div>
      <button data-tooltip-align="top" title="Tooltip Content">
        {"Hover"}
      </button>
    </div>
  </ClayTooltipProvider>
);
render(<Component />);

contentRenderer

contentRenderer prop gives you the ability to format the content passed to the Tooltip via the title attribute to meet your requirements.

import {ClayTooltipProvider} from '@clayui/tooltip';

import {ClayTooltipProvider} from '@clayui/tooltip';

const Component = () => (
  <ClayTooltipProvider
    contentRenderer={props =>
      props.title
        .toLowerCase()
        .split(" ")
        .join("-")
    }
  >
    <div>
      <button title="Hello World">{"kebabCase"}</button>
    </div>
  </ClayTooltipProvider>
);

render(<Component />);

const Component = () => (
  <ClayTooltipProvider
    contentRenderer={props =>
      props.title
        .toLowerCase()
        .split(" ")
        .join("-")
    }
  >
    <div>
      <button title="Hello World">{"kebabCase"}</button>
    </div>
  </ClayTooltipProvider>
);
render(<Component />);

API

Property	Type	Required	Default	Description
alignPosition	typeof ALIGN_POSITIONS[number]	false	'bottom'	Position in which the tooltip will be aligned to the element.
show	boolean	false		Flag to indicate if tooltip is displayed.

TooltipProvider

Property	Required	Default
autoAlign	false	true
contentRenderer	false	(props) => props.title
delay	false	600

Position
- Top
- Right
- Bottom
- Left

Position

Top

<div class="fade tooltip clay-tooltip-top show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the top</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-top-left show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the top left</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-top-right show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the top right</div>
	</div>
</div>

Right

<div class="fade tooltip clay-tooltip-right show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the right</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-right-top show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the right top</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-right-bottom show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the right bottom</div>
	</div>
</div>

Bottom

<div class="fade tooltip clay-tooltip-bottom show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the bottom</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-bottom-left show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the bottom left</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-bottom-right show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the bottom right</div>
	</div>
</div>

Left

<div class="fade tooltip clay-tooltip-left show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the left</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-left-top show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the left top</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-left-bottom show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the left bottom</div>
	</div>
</div>