Tooltip

cds-tooltip

The Tooltip component provides additional context or information when a user hovers over or interacts with an element. It appears as a small, concise message, offering guidance or clarifications without cluttering the interface.

Default

• Variant: --help
• Position: --bottom
• Size: --medium

Default tooltip

<button class="cds-button cds-tooltip">
  <span class="cds-button__text">Show tooltip</span>
  <span class="cds-tooltip__text">Text...</span>
</button>

---

Elements

Element	Code	Parent	HTML tag	Required
Text	cds-tooltip__text	Block: cds-tooltip	<span>	required

Tooltip trigger

Nota indicando que el bloque cds-tooltip se coloca en el elemento que se quiere que muestre el tooltip. En este caso, el bloque se utiliza como trigger del tolltip, mientras el tooltip text se utiliza como el contenedor del texto que se mostrará.

---

Modifiers

Modifier	Options
Variant	--help, --tip
Size	--small, --medium
Position	--right, --bottom, --left, --top

Variant

---

<button class="cds-button cds-tooltip">
  <span class="cds-button__text">Tip tooltip</span>
  <span class="cds-tooltip__text cds-tooltip--tip">Text...</span>
</button>

Size

---

<button class="cds-button cds-tooltip">
  <span class="cds-button__text">Small tooltip</span>
  <span class="cds-tooltip__text cds-tooltip--small">Text...</span>
</button>

Position

---

<button class="cds-button cds-tooltip">
  <span class="cds-button__text">Bottom tooltip</span>
  <span class="cds-tooltip__text cds-tooltip--top">Text...</span>
</button>