The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.

Props

bottombottom-endbottom-startleftleft-endleft-startrightright-endright-starttoptop-endtop-startplacementenumSpecifies where the component should be placed relative to the caller.

disableAutoPlacementdisableAutoPlacementbooleanIf set, the component will not be placed automatically near it's caller.

mi/baseline/addmi/baseline/badgemi/baseline/checkmi/baseline/check-circlemi/baseline/deletemi/baseline/donemi/baseline/downloadmi/baseline/editmi/baseline/emailmi/baseline/homemi/baseline/infomi/baseline/location-onmi/baseline/notificationsmi/baseline/paymentmi/baseline/personmi/baseline/searchmi/baseline/settingsmi/baseline/sharemi/baseline/starmi/baseline/warningiconstringSet the name of the icon.

Overview

The <mds-help> web component is a contextual help affordance of the Magma Design System: a small help icon that reveals an explanatory tooltip on interaction. It composes mds-icon and mds-tooltip into a single drop-in element, so there is no native HTML primitive it replaces.

Semantic Behavior

Tooltip-on-icon: The host always renders a help icon and anchors a tooltip to it; the slotted text becomes the tooltip body and is shown while the pointer hovers the icon. The icon is not focusable, so keyboard users cannot open the tooltip: do not put essential information only here.Auto-placement: Unless disableAutoPlacement is set (auto-placement is on by default), the tooltip repositions itself to stay near its caller and within the viewport, overriding the static placement when space is constrained.Default-slot is text: The default slot is intended for a plain text string only; HTML elements or components in the slot are discouraged because the content is rendered inside the tooltip.

Properties & Visual Configurations

icon is an SVG filename slug from the Magma icon library; when omitted, the component falls back to the standard outline help glyph, so set it only to convey a help affordance other than the default question mark.placement sets the preferred side of the icon on which the tooltip appears (e.g. 'top', 'bottom-start'). It is the starting position; auto-placement may move the tooltip away from this preference at runtime.disableAutoPlacement turns off dynamic repositioning. Leave it off in scrollable or edge-of-viewport contexts; set it only when you need the tooltip pinned strictly to the placement side. The tooltip’s dimensions and reveal timing are tuned via the CSS custom properties documented in AGENTS.md (--mds-help-tooltip-width, --mds-help-tooltip-min-width, --mds-help-tooltip-max-width, --mds-help-tooltip-delay).

Dependencies

Uses: mds-icon, mds-tooltipUsed by: mds-policy-ai