Common incorrect uses of <mds-input-tip>. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in agents/anti-patterns.md - they apply here too but are not repeated.

Do Not Use mds-input-tip as a Standalone Tooltip

<mds-input-tip> is an internal compound child of mds-input, mds-input-date, and mds-input-select. It relies on absolute positioning inside a relatively-positioned input shell; outside that context it has no anchor. Use mds-tooltip or mds-help for standalone floating hints.

<!-- INCORRECT -->
<mds-input-tip active>
  <mds-input-tip-item variant="text">Suggerimento generico</mds-input-tip-item>
</mds-input-tip>

<!-- CORRECT -->
<mds-help>Suggerimento generico</mds-help>

Do Not Put Plain Text Directly in the Default Slot

The default slot of <mds-input-tip> accepts only mds-input-tip-item elements. Plain text nodes are not styled or accessible. Use <mds-input-tip-item variant="text"> to carry freeform hint copy.

<!-- INCORRECT -->
<mds-input-tip position="bottom" active>
  Inserisci la tua email aziendale
</mds-input-tip>

<!-- CORRECT -->
<mds-input-tip position="bottom" active>
  <mds-input-tip-item variant="text">
    Inserisci la tua email aziendale
  </mds-input-tip-item>
</mds-input-tip>

Do Not Set active=“false” to Collapse the Tip

active is a boolean attribute: remove it (or set the prop to undefined) to collapse. A string value is fragile: "false" is read as false on this component, but the attribute stays on the element until the component renders (attribute selectors and scripts reading it see it set). Never write a boolean as a string.

<!-- INCORRECT -->
<mds-input-tip position="top" active="false">
  <mds-input-tip-item variant="required"></mds-input-tip-item>
</mds-input-tip>

<!-- CORRECT -->
<mds-input-tip position="top">
  <mds-input-tip-item variant="required"></mds-input-tip-item>
</mds-input-tip>

Do Not Use an Undocumented position Value

position accepts only "top" and "bottom". Any other value (e.g. "left", "right") is not typed and has no matching CSS rule; the tip falls back to the initial-value behavior silently.

<!-- INCORRECT -->
<mds-input-tip position="left" active>
  <mds-input-tip-item variant="text">Aiuto</mds-input-tip-item>
</mds-input-tip>

<!-- CORRECT -->
<mds-input-tip position="bottom" active>
  <mds-input-tip-item variant="text">Aiuto</mds-input-tip-item>
</mds-input-tip>

Do Not Slot Non-tip-item Elements for Custom Styles

Slotting arbitrary HTML or other Magma components (e.g. <mds-badge>, <span>) bypasses the item’s own layout, color tokens, and border-radius joining logic. Always wrap content in <mds-input-tip-item>.

<!-- INCORRECT -->
<mds-input-tip position="bottom" active>
  <span style="color: red;">Testo personalizzato</span>
</mds-input-tip>

<!-- CORRECT -->
<mds-input-tip position="bottom" active>
  <mds-input-tip-item variant="text">Testo personalizzato</mds-input-tip-item>
</mds-input-tip>

Do Not Override Positioning via Inline Styles

The tip is absolutely positioned by its own CSS, driven by --mds-input-tip-* custom properties. Setting position, top, left, or right inline breaks the animation transform and the active-state offset calculation.

/* INCORRECT */
mds-input-tip {
  position: relative;
  top: 10px;
}

/* CORRECT */
mds-input-tip {
  --mds-input-tip-vertical-offset: calc(var(--spacing) * 200);
  --mds-input-tip-horizontal-offset: calc(var(--spacing) * 300);
}