Tooltip<mds-tooltip>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
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
placementenumSpecifies where the component should be placed relative to the caller.
relationenumSets what the tooltip is to its caller: its description (aria-describedby), or its label (aria-labelledby), when the tooltip holds the only visible name of the caller, as on an icon-only button.
strategyenumSets the CSS position strategy of the component.
typographyenumSpecifies the font typography of the element
disableAutoPlacementdisableAutoPlacementbooleanIf set, the component will not be placed automatically near it's caller.
disableShiftdisableShiftbooleanIf set, the component will not be kept inside the viewport.
flipflipbooleanSpecifies the placement of the component if no space is available where it is placed.
visiblevisiblebooleanSpecifies the visibility of the component.
targetstringSpecifies the selector of the target element, this attribute is used with querySelector method.
offsetnumberSets distance between the tooltip and the caller.
shiftPaddingnumberSets a safe area distance between the tooltip and the viewport.
Overview
The <mds-tooltip> web component is the floating contextual hint of the Magma Design System. It renders a small text bubble that attaches to a separate trigger element identified by a CSS selector, rather than relying on the native title attribute.
Semantic Behavior
Detached trigger model: The tooltip is not wrapped around its trigger; the required target selector is resolved and the component binds itself to the first matching caller.Hover-driven visibility: The bubble appears and disappears as the pointer enters and leaves the trigger; keyboard focus does not show it. The tooltip takes role="tooltip" and, when it shares a DOM tree with the trigger, writes aria-describedby on it, or aria-labelledby with relation="label"; an attribute the trigger already has is left alone.Visibility is the source of truth: Setting visible programmatically shows or dismisses the bubble, allowing the tooltip to be controlled without a hover.Live repositioning: Changing any layout prop (placement, offset, disableShift, shiftPadding, strategy, flip, disableAutoPlacement) recomputes the floating position on the fly.Text-only default slot: The default slot is meant for a plain text string (exposed as the text shadow part); HTML elements or components should not be slotted in.
Properties & Visual Configurations
target (required) is the CSS selector of the trigger element the tooltip listens to and anchors against; the first match wins.placement chooses the preferred side and alignment relative to the caller (e.g. 'top', 'bottom-start'); the system picks the best side automatically by default (disableAutoPlacement opts out and pins to placement) and flip allows falling back to the opposite side when the preferred one lacks space (only together with disableAutoPlacement).the bubble is kept inside the viewport by default (disableShift opts out), with shiftPadding reserving a safe gap from the viewport edges; offset sets the distance between the bubble and the caller.strategy selects the CSS positioning strategy: 'fixed' (default) escapes clipping ancestors, 'absolute' anchors within the nearest positioned ancestor.relation says what the tooltip is to its trigger: its 'description' (default, aria-describedby), or its 'label' (aria-labelledby), when the tooltip text is the only visible name of the trigger, as on an icon-only button. Changing it moves the attribute on the trigger.typography picks the text scale of the bubble ('tip', 'caption', 'detail'), where 'tip' is the default compact hint sizing.