Skip to main content
🏠ComponentsTooltipVersion: 2.0.0-beta.6

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 the users understand something. They should always be non-essential to the global understanding.

Hover me!

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

The tooltip can be displayed by adding a visible property.

Default tooltip

<qtm-tooltip
visible
tooltip-title="Tooltip title."
content="Write the tooltip content here."
>
Default tooltip
</qtm-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 tooltipMedium tooltipLarge tooltip
<qtm-tooltip
size="small"
visible
tooltip-title="Tooltip title."
content="Write the tooltip content here."
>
Small tooltip
</qtm-tooltip>
<qtm-tooltip
size="medium"
visible
tooltip-title="Tooltip title."
content="Write the tooltip content here."
>
Medium tooltip
</qtm-tooltip>
<qtm-tooltip
size="large"
visible
tooltip-title="Tooltip title."
content="Write the tooltip content here."
>
Large tooltip
</qtm-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

Left tooltip

Right tooltip

Bottom tooltip

<qtm-tooltip
visible
tooltip-title="Tooltip title."
content="Write the tooltip content here."
orientation="top"
>Top tooltip</qtm-tooltip
>
<qtm-tooltip
visible
tooltip-title="Tooltip title."
content="Write the tooltip content here."
orientation="left"
>Left tooltip</qtm-tooltip
>
<qtm-tooltip
visible
tooltip-title="Tooltip title."
content="Write the tooltip content here."
orientation="right"
>Right tooltip</qtm-tooltip
>
<qtm-tooltip
visible
tooltip-title="Tooltip title."
content="Write the tooltip content here."
orientation="bottom"
>Bottom tooltip</qtm-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 tip-position property with the start, center, end values.

<qtm-tooltip tip-position="end" content="Top end tooltip" visible></qtm-tooltip>
<qtm-tooltip
tip-position="center"
content="Top center tooltip"
visible
></qtm-tooltip>
<qtm-tooltip
tip-position="start"
content="Top start tooltip"
visible
tip-position="start"
></qtm-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!

<qtm-tooltip
visible
low-contrast
tooltip-title="Tooltip title."
content="Write the tooltip content here."
>
Hover me!
</qtm-tooltip>

API

qtm-tooltip

PropertyTypeDefaultDescription
classesstring''List of classes to override or extend the styles applied to the component. You can use available utility classes by importing
contentstring''The tooltip content.
lowContrastbooleanfalseLow 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.
titlestring''DEPRECATED: The deprecated tooltip title. Use `tooltipTitle` instead.
tooltipTitlestring''The tooltip title.
visiblebooleanfalseVisible option of the tooltip to display.

Deprecated Property

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