Tooltip

yarn add @clayui/tooltip

React Component
CSS / Markup

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

Using contentRenderer

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

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

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]		'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>