Skip to main content
🏠ComponentsTooltipVersion: Next

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!

<div class="qtm-tooltip" tabindex="0">
  Hover me!
  <div class="qtm-tooltip-container">
    <div class="qtm-tooltip-title">Tooltip title.</div>
    <p>Write the tooltip content here.</p>
  </div>
</div>

The tooltip can be displayed by adding a qtm-visible class.

Default tooltip

<div class="qtm-tooltip qtm-visible">
  Default tooltip
  <div class="qtm-tooltip-container">
    <div class="qtm-tooltip-title">Tooltip title.</div>
    <p>Write the tooltip content here.</p>
  </div>
</div>

Tooltip sizes​

Tooltips are available in three sizes with following classes qtm-small qtm-medium qtm-large. By default, the medium tooltip is used.

Small tooltipMedium tooltipLarge tooltip
<div class="qtm-tooltip qtm-visible qtm-small">
  Small tooltip
  <div class="qtm-tooltip-container">
    <div class="qtm-tooltip-title">Tooltip title.</div>
    <p>Write the tooltip content here.</p>
  </div>
</div>
...

Tooltip orientations​

The tooltip component can be positioned according to its target by setting qtm-bottom,qtm-top,qtm-left,qtm-right classes.

Top tooltip

Left tooltip

Right tooltip

Bottom tooltip

<div class="qtm-tooltip qtm-visible qtm-top">
  left tooltip
  <div class="qtm-tooltip-container">
    <div class="qtm-tooltip-title">Tootltip title.</div>
    <p>Write the tooltip content here.</p>
  </div>
</div>
<div class="qtm-tooltip qtm-visible qtm-left">...</div>
<div class="qtm-tooltip qtm-visible qtm-right">...</div>
<div class="qtm-tooltip qtm-visible qtm-bottom">...</div>

Tooltip directions​

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

For all directions, the tip position options have qtm-start, qtm-center, qtm-end classes.

<div class="qtm-tooltip qtm-visible qtm-top qtm-end">...</div>
<div class="qtm-tooltip qtm-visible qtm-top qtm-center">...</div>
<div class="qtm-tooltip qtm-visible qtm-top qtm-start">...</div>
...

Low contrast option​

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

Hover me!

<div class="qtm-tooltip qtm-visible qtm-low-contrast">
  <div class="qtm-tooltip-container">
    <div class="qtm-tooltip-title">Tootltip title.</div>
    <p>Write the tooltip content here.</p>
  </div>
</div>