Tooltip

yarn add @clayui/tooltip

React Component
CSS / Markup

Stable3.0.6

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

Tooltip
TooltipProvider
API

import ClayTooltip from '@clayui/tooltip';
import React from 'react';

import ClayTooltip from '@clayui/tooltip';
import React from 'react';

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.

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 React from 'react';

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

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 />);

API

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

TooltipProvider

Property	Type	Required	Default	Description
autoAlign			true
contentRenderer			props => props.title
delay			600

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

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>