Tooltip

Tooltips are contextual, non-actionable, and informative floating labels. They can be activated by hover, focus, or even click to display additional information to help users understand something. They should always be non-essential to the global understanding.

Hover me!

Tooltip title.

Write the tooltip content here.

<Tooltip tooltipTitle="Tooltip title." content="Write the tooltip content here.">
  Hover me!
</Tooltip>

The tooltip can be displayed by adding a visible property.

Default tooltip

Tooltip title.

Write the tooltip content here.

<Tooltip
  visible
  tooltipTitle="Tooltip title."
  content="Write the tooltip content here."
>
  Default tooltip
</Tooltip>

Tooltip Sizes

Tooltips are available in three sizes: small, medium, large. By default, the medium tooltip is used. You can change the tooltip size with the size property.

Small tooltip

Tooltip title.

Write the tooltip content here.

Medium tooltip

Tooltip title.

Write the tooltip content here.

Large tooltip

Tooltip title.

Write the tooltip content here.

<Tooltip
  visible
  tooltipTitle="Tooltip title."
  content="Write the tooltip content here."
  size="small"
>
  Small tooltip
</Tooltip>
<Tooltip
  visible
  tooltipTitle="Tooltip title."
  content="Write the tooltip content here."
  size="medium"
>
  Medium tooltip
</Tooltip>
<Tooltip
  visible
  tooltipTitle="Tooltip title."
  content="Write the tooltip content here."
  size="large"
>
  Large tooltip
</Tooltip>

Tooltip Orientations

The tooltip component can be positioned according to its target by setting the orientation property with the bottom, top, left, right values.

Top tooltip

Tooltip title.

Write the tooltip content here.

Left tooltip

Tooltip title.

Write the tooltip content here.

Right tooltip

Tooltip title.

Write the tooltip content here.

Bottom tooltip

Tooltip title.

Write the tooltip content here.

<Tooltip
  visible
  tooltipTitle="Tooltip title."
  content="Write the tooltip content here."
  orientation="top"
>
  Top tooltip
</Tooltip>
<Tooltip
  visible
  tooltipTitle="Tooltip title."
  content="Write the tooltip content here."
  orientation="left"
>
  Left tooltip
</Tooltip>
<Tooltip
  visible
  tooltipTitle="Tooltip title."
  content="Write the tooltip content here."
  orientation="right"
>
  Right tooltip
</Tooltip>
<Tooltip
  visible
  tooltipTitle="Tooltip title."
  content="Write the tooltip content here."
  orientation="bottom"
>
  Bottom tooltip
</Tooltip>

Tip Positions

The tooltip component should always be positioned according to its target. The tip position variants help you complete the tooltip orientation variant to be even more precise.

For all orientations, use the tipPosition property with the start, center, end values.

Top end

Top end tooltip

Top center

Top center tooltip

Top start

Top start tooltip

Left end

Left end tooltip

Right end

Right end tooltip

Left center

Left center tooltip

Right center

Right center tooltip

Left start

Left start tooltip

Right start

Right start tooltip

Bottom end

Bottom end tooltip

Bottom center

Bottom center tooltip

Bottom start

Bottom start tooltip

<Tooltip content="Top end tooltip" visible tipPosition="end">
  Top end
</Tooltip>
<Tooltip content="Top center tooltip" visible>
  Top center
</Tooltip>
<Tooltip content="Top start tooltip" visible tipPosition="start">
  Top start
</Tooltip>
<Tooltip content="Left end tooltip" visible tipPosition="end" orientation="left">
  Left end
</Tooltip>
...

Low Contrast Option

To lower the visual emphasis on the tooltip component, you can activate the Low contrast option by adding the lowContrast property. This option will apply a lighter background to the tooltip while remaining always accessible.

Hover me!

Tooltip title.

Write the tooltip content here.

<Tooltip
  visible
  lowContrast
  tooltipTitle="Tooltip title."
  content="Write the tooltip content here."
>
  Hover me!
</Tooltip>

Custom Classes

Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

Tooltip with custom shadow

Tooltip title.

Write the tooltip content here.

<Tooltip
  visible
  classes="shadow-m-light"
  tooltipTitle="Tooltip title."
  content="Write the tooltip content here."
>
  Tooltip with custom shadow
</Tooltip>

Event handling

Not applicable. The Tooltip component is a visual element and does not support any event handlers directly. The tooltip's visibility can be controlled through the visible prop, which you can toggle based on your application's state.

API

QtmTooltip

Property	Type	Default	Description
classes	string	''	List of classes to override or extend the styles applied to the component. You can use available utility classes by importing
content	string	''	The tooltip content.
lowContrast	boolean	false	Low contrast option to apply a lighter background.
orientation	"bottom" | "left" | "right" | "top"	'top'	Tooltip position according to its target.
size	"large" | "medium" | "small"	'medium'	The size of element
tipPosition	"center" | "end" | "start"	'center'	The tip position.
title	string	''	DEPRECATED: The deprecated tooltip title. Use `tooltipTitle` instead.
tooltipTitle	string	''	The tooltip title.
visible	boolean	false	Visible option of the tooltip to display.

Deprecated Property

Note: The title property is deprecated. Use the tooltipTitle property instead.