` above the field and `` below it, never ``, `` or ``. - Provide `MAT_FORM_FIELD_DEFAULT_OPTIONS` with `{ appearance: 'outline' }` in the app providers, or the form-field styling does not apply. - Wrap `` children of `` and `` in `

`, or the panel is unstyled. - `SourcePopoverService` is not provided in root: add it to the `providers` of the component that injects it. Popover content is a `TemplateRef`. - Use `` for tabs (`SourceTabsComponent`/`SourceTabComponent` are deprecated). For new modals prefer `SourceModalNativeService` from the native package; the CDK `SourceModalComponent` stays supported. ## Source Element vs Source Component Two parallel ways to style markup: - **Source Component** — Angular component with signal inputs/outputs. Imported by class (e.g. `import { SourceButtonComponent } from '@3dsource/source-ui-native'`) and used as a tag: ``, ``, ``, ``. - **Source Element** — CSS-only BEM class on a native HTML tag. No import — styles come from the stylesheet. Example: ` ... ``` For several or changing anchors, pass the origin from the template instead of `viewChild`: each button opens the popover next to itself. ```html @for (item of items; track item.id) { } ... ``` ```ts open(origin: CdkOverlayOrigin, tpl: TemplateRef) { this.overlayRef = this.popover.show(origin, this.vcr, { srcPopoverTpl: tpl }); } ``` **Methods:** - `show(origin: CdkOverlayOrigin, vcr: ViewContainerRef, override: Partial): OverlayRef` - `closePopover(overlayRef: OverlayRef): void` **`override` fields** (`Partial`: every field is optional, the service fills in the defaults): - `srcPopoverTpl: TemplateRef` — the content; needed in practice (templates only; components are not supported) - `headerTitle: string` - `hasBackButton: boolean`, `hasCloseButton: boolean` - `popoverMaxHeight: string` - `panelCustomClass: string` - `breakpointDesktop: string` — a media query, default `'(min-width: 1024px)'`; while it does not match, the popover is a bottom drawer - `position: ConnectedPosition[]` — preferred placements, tried in order (from `@angular/cdk/overlay`) - `hasBackdrop: boolean` — the service does not close the popover on a backdrop click; subscribe to `backdropClick()`, as above - `closeOnBackdropClick: boolean` — not used by the service - `testID: string` `` opens the same popover from a wrapped trigger element ([SourcePopoverTriggerComponent API](./docs/components/popover-trigger.md)); both ways are equal. ### CDK Dialog for SourceModalComponent Open `SourceModalComponent` with CDK `Dialog` from `@angular/cdk/dialog`: inject it into a field (`private dialog = inject(Dialog)`), then call `this.dialog.open(SourceModalComponent, { data })`. Pass the result and data types explicitly, or `data` is not checked against `SourceModalData` and `ref.closed` emits `unknown`. Examples, all `SourceModalData` fields and the footer button types: [SourceModalComponent API](./docs/components/modal.md). - Never put `` in a template: the component works only when opened through `Dialog` or `SourceModalNativeService`. - Every footer button closes the modal with the value its `action()` returns. Return the result from `action`; do not call `ref.close()` inside it. - `ref.closed` emits that value, or `undefined` after Esc, a backdrop click or the header close button. - For a form or any custom layout, open your own component with `dialog.open(YourComponent)` and use the `src-modal` BEM markup inside it. ## Toastr styling `@3dsource/source-ui` styles [ngx-toastr](https://www.npmjs.com/package/ngx-toastr) to match the Source UI design system. ### Default (global) toasts Install `ngx-toastr`, import its stylesheet, register the provider, and use the standard `ToastrService` API. ngx-toastr 20 still declares an Angular 21 peer range: on Angular 22, install it with `npm install ngx-toastr --legacy-peer-deps` (pnpm only warns). The ngx-toastr stylesheet places the toast container and lays out the toasts. Import it before the source-ui stylesheet, so that the source-ui styles override the default `.toast-container` / `.toast-success` / `.toast-error` / `.toast-warning` / `.toast-info` / `.toast-message` / `.toast-close-button` selectors: ```scss @use '../node_modules/@3dsource/source-ui-native/styles/source.ui.native.scss' as source-ui-native; @use 'ngx-toastr/toastr'; @use '../node_modules/@3dsource/source-ui/styles/source.ui.scss' as source-ui; ``` ```ts import { provideToastr } from 'ngx-toastr'; providers: [provideToastr()] ``` To adjust a toast, override its custom properties. They are declared on `.toast-container .ngx-toastr`, so set them there in global styles, for example `.toast-container .ngx-toastr { --srcToastrMaxWidth: 480px; }`, or on `.toast-container .ngx-toastr.toast-error` for one type: `--srcToastrBg`, `--srcToastrMinWidth`, `--srcToastrMaxWidth`, `--srcToastrMessageFontSize`, `--srcToastrBorderRadius`, `--srcToastrShadow`. Each type (`.toast-error`, `.toast-info`, `.toast-warning`, `.toast-success`) sets its own `--srcToastrBg`. ### Inline toasts inside a custom container Use when toasts must render inside a specific DOM region (e.g. a panel or preview area) rather than the page overlay. `ToastrService` is provided in root, so all toasts share one container: once `overlayContainer` is set, every toast of the app renders in it. Put the container in a component that stays for the whole life of the app, usually the root component, as the ngx-toastr README advises. Two steps: 1. Register `provideToastr({ positionClass: 'inline' })`. 2. In the hosting component, render a container element with the `toastContainer` directive and wire it to `ToastrService.overlayContainer`: ```ts import { afterNextRender, Component, inject, viewChild } from '@angular/core'; import { ToastContainerDirective, ToastrService } from 'ngx-toastr'; import { SourceButtonComponent } from '@3dsource/source-ui-native'; @Component({ selector: 'my-panel', imports: [ToastContainerDirective, SourceButtonComponent], template: `

Notify `, styles: `:host { position: relative; }`, }) export class MyPanel { readonly toast = viewChild(ToastContainerDirective); private toastrService = inject(ToastrService); _initToastr = afterNextRender(() => { const toast = this.toast(); if (toast) this.toastrService.overlayContainer = toast; }); showToastr() { this.toastrService.show('Hello'); } } ``` The host element must have `position: relative` so the inline container can anchor absolutely positioned toasts. The library also exposes a `.toast-container.inline` selector variant picked up automatically. ## Shared documentation - [@3dsource/source-ui-native llms.txt](../source-ui-native/llms.txt): Key concepts, setup, theming, Source Elements, icons, design tokens, design rules - [Design tokens](../source-ui-native/guides/design-tokens.md): The native guide on which token to pick: the priority order, semantic color layers, gaps, padding, border radius, the spacing scale - [Native full documentation](../source-ui-native/docs/llms-full.txt): Self-contained comprehensive reference for the native library ## Component API reference (inline) > Full API for every component inlined below. No external links needed. ### SourceBreadcrumbItemDirective (@3dsource/source-ui) **Selector:** `[srcBreadcrumbItem]` · **Kind:** Directive **Usage:** ```html

``` ### SourceBreadcrumbSeparatorDirective (@3dsource/source-ui) **Selector:** `[srcBreadcrumbSeparator]` · **Kind:** Directive **Usage:** ```html

@for (item of items; track item.label; let last = $last) { @if (last) { {{ item.label }} } @else { {{ item.label }} } } ``` ### SourceBreadcrumbsComponent (@3dsource/source-ui) **Selector:** `src-breadcrumbs` · **Kind:** Component **Usage:** ```html

@for (item of items; track item.label; let last = $last) { @if (last) { {{ item.label }} } @else { {{ item.label }} } }

``` **Inputs:** | Input | Type | Default | Values | Required | Description | |-------|------|---------|--------|----------|-------------| | ariaLabel | string | "Breadcrumb" | — | no | Accessible label for the

landmark element. | | testID (alias: data-testid) | string | "" | — | no | Test identifier applied as data-testid attribute on the nav element. | | overflowMode | SourceBreadcrumbsOverflowModeKeys | "none" | none, overlay, popover | no | Controls how the component handles overflow when items don't fit. 'none' disables overflow handling. 'overlay' collapses middle items into an ellipsis button that opens a floating bar showing all items. 'popover' shows collapsed items in a popover dropdown (drawer on mobile). | | breakpointDesktop | string | "(min-width: 1024px)" | — | no | CSS media query that determines the mobile/desktop breakpoint. Used to match the popover's responsive behavior and toggle the close button in drawer mode. | ### ColorPaletteComponent (@3dsource/source-ui) **Selector:** `src-color-palette` · **Kind:** Component **Usage:** ```html Internal sub-component of src-color-picker. Not intended for direct use. ``` **Inputs:** | Input | Type | Default | Values | Required | Description | |-------|------|---------|--------|----------|-------------| | selectedColor | string | — | — | yes | The currently selected color in HEX format (e.g. "#ff0000"). | | hue | string | — | — | yes | The pure hue color in HEX format used to render the palette gradient. | | isNeedUpdatePalette | number | — | — | yes | Increment to trigger a full palette redraw (recalculates indicator position and gradient). | | isNeedUpdatePaletteGradientOnly | number | — | — | yes | Increment to redraw only the palette gradient without moving the indicator position. | **Outputs:** | Output | Type | Description | |--------|------|-------------| | paletteColorUpdate | string | Emits the selected color in HEX format when the user picks a color from the palette. | ### SourceColorPickerComponent (@3dsource/source-ui) **Selector:** `src-color-picker` · **Kind:** Component **Usage:** ```html ``` **Inputs:** | Input | Type | Default | Values | Required | Description | |-------|------|---------|--------|----------|-------------| | selectedColor | string | — | — | yes | The selected color as a 6-digit HEX value (#rrggbb). The palette and the hue slider do not follow other formats, such as #fff. | | isCompact | boolean | false | — | no | Set the compact mode. The compact mode is used to reduce the size of the color picker. It is suggested to decrease the slider thickness as well. | | orientation | SourceColorPickerOrientationKeys | "horizontal" | horizontal, vertical | no | Position of the hue slider. | | hasInput | boolean | true | — | no | Set the visibility of the input field. | | sliderThickness | number | 28 | — | no | Set the thickness of the hue slider. | | testID (alias: data-testid) | string | "" | — | no | Test ID for querying the color picker in tests. | **Outputs:** | Output | Type | Description | |--------|------|-------------| | colorUpdate | string | Emits the color that the user picks, as a lowercase 6-digit HEX value (#rrggbb). | ### ColorSliderComponent (@3dsource/source-ui) **Selector:** `src-color-slider` · **Kind:** Component **Usage:** ```html Internal sub-component of src-color-picker. Not intended for direct use. ``` **Inputs:** | Input | Type | Default | Values | Required | Description | |-------|------|---------|--------|----------|-------------| | selectedColor | string | — | — | yes | The currently selected color in HEX format, used to position the slider indicator. | | orientation | SourceColorPickerOrientationKeys | — | horizontal, vertical | yes | Layout direction of the hue slider. | | sliderThickness | number | — | — | yes | Thickness of the hue slider in pixels. | | isNeedUpdateSlider | number | — | — | yes | Increment to trigger a slider redraw (recalculates indicator position and gradient). | **Outputs:** | Output | Type | Description | |--------|------|-------------| | sliderColorUpdate | string | Emits the selected hue color in HEX format when the user moves the slider. | ### SourceModalComponent (@3dsource/source-ui) **Selector:** `src-modal` · **Kind:** Component **Usage:** ```html import { Dialog } from '@angular/cdk/dialog'; import { SourceModalComponent, type SourceModalData } from '@3dsource/source-ui'; dialog = inject(Dialog); openSimple() { const config: SourceModalData = { headerTitle: 'Confirm action', context: 'info', closeButton: true, content: 'Are you sure you want to proceed? This action cannot be undone.', footerButtons: [ { label: 'Cancel', action: () => undefined }, { label: 'Confirm', srcButtonConfig: { weight: 'primary', appearance: 'filled' }, action: () => 'confirmed', }, ], }; const ref = this.dialog.open(SourceModalComponent, { data: config }); ref.closed.subscribe((result) => console.log(result)); // 'confirmed', or undefined after Cancel, Esc, a backdrop click or the close button } footerButtons: [ [{ label: 'Delete all', srcButtonConfig: { weight: 'ghost', context: 'error' }, action: () => 'reset' }], [ { label: 'Cancel', action: () => undefined }, { label: 'Save', srcButtonConfig: { weight: 'primary' }, action: () => 'saved' }, ], ], openCustom() { const ref = this.dialog.open(EditUserDialogComponent, { data: { userId: 42 }, }); ref.closed.subscribe((result) => console.log(result)); } import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog'; import { SourceButtonComponent, SourceIconButtonComponent } from '@3dsource/source-ui-native'; export interface EditResult { ok: boolean; } @Component({ selector: 'app-edit-user-dialog', imports: [SourceButtonComponent, SourceIconButtonComponent], templateUrl: './edit-user-dialog.component.html', }) export class EditUserDialogComponent { readonly data = inject<{ userId: number }>(DIALOG_DATA); readonly #ref = inject>(DialogRef); save() { this.#ref.close({ ok: true }); } cancel() { this.#ref.close(); } } ``` **SourceModalData:** | Field | Type | Required | Description | |-------|------|----------|-------------| | headerTitle | string | no | Title shown at the top of the built-in body. Only used in string-content mode. | | context | SourceModalContextKeys | no | Visual context ('default' \| 'info' \| 'success' \| 'warning' \| 'error'). Controls the icon rendered in the body slot. | | closeButton | boolean | no | Show the close (x) icon button in the built-in header. | | closeButtonAriaLabel | string | no | ARIA label for the icon-only close button. Defaults to 'Close'. | | content | string | no | HTML string rendered via [innerHTML] inside the built-in src-modal__scroll-box. Mutually exclusive with opening a custom component — for custom content, pass your own component class to dialog.open() instead of SourceModalComponent. | | footerButtons | DialogButtonsData \| DialogButtonsData[] | no | Footer buttons. Pass a flat DialogButtonsData array for a single group, or an array of arrays for multiple groups (two groups render with space-between; more than two is not visually supported). Each button: { label, action, srcButtonConfig? }. The value returned by action() is passed to DialogRef.close() and emitted on closed. | | testID | string | no | data-testid value applied to the modal root and composed into inner selectors (e.g. '-header-close'). | **Service — Dialog (from @angular/cdk/dialog):** - `open(component: ComponentType, config?: DialogConfig>): DialogRef` — Open SourceModalComponent by calling inject(Dialog).open(SourceModalComponent, { data }). Pass the result and data types explicitly, as in `open(...)`, so that TypeScript checks `data`. Unlike source-ui-native's native-dialog modal, this one uses Angular CDK Dialog — consumers must have @angular/cdk installed (peer). No custom service is exported; always use CDK's Dialog directly. For custom modal content, pass any other component class to dialog.open() and use the src-modal BEM markup inside it for visual consistency. `width` in the Dialog config sizes the overlay panel, not the card; to resize the `.src-modal` card, set `--srcModalWidth` on it. **DialogRef (from @angular/cdk/dialog):** Returned by dialog.open(). Use the CDK ref directly — no wrapper class is exported. close(result) dismisses the modal; closed emits the result once and completes. | Method | Description | |--------|-------------| | `close(result?: R)` | Close the modal and pass an optional result to subscribers of closed. | | `closed: Observable` | Emits once with the close result (undefined after Esc, a backdrop click or the header close button) and completes. | ### SourcePopoverTriggerComponent (@3dsource/source-ui) **Selector:** `src-popover-trigger` · **Kind:** Component **Usage:** ```html

Filters

All
Materials
Textures

Short help text.

``` **Inputs:** | Input | Type | Default | Values | Required | Description | |-------|------|---------|--------|----------|-------------| | srcPopoverTpl | TemplateRef | — | — | yes | Template reference for the popover content to display. | | headerTitle | string | — | — | no | Title text displayed in the popover header. | | activeClass | string | — | — | no | CSS class added to the trigger's wrapper div, not to the projected element, while the popover is open. Defaults to 'active'. | | hasBackButton | boolean | false | — | no | Rarely used, kept from older designs. If true, shows a back button in the popover header. It closes the popover, like the close button. | | hasCloseButton | boolean | true | — | no | If true, shows a close button in the popover header. | | hasBackdrop | boolean | true | — | no | If true, renders a backdrop behind the popover overlay. | | closeOnBackdropClick | boolean | true | — | no | If true, clicking the backdrop closes the popover. | | popoverMaxHeight | string | "auto" | — | no | Maximum height of the popover panel as a CSS length, e.g. "300px". By default the panel is capped at --srcPopoverMaxHeight (80vh). | | panelCustomClass | string | — | — | no | Custom CSS class applied to the popover panel for additional styling. | | testID (alias: data-testid) | string | "" | — | no | Test ID of the trigger wrapper. The open popover panel gets the same value. | | breakpointDesktop | string | "(min-width: 1024px)" | — | no | CSS media query that determines when the popover uses desktop positioning instead of mobile bottom sheet. | | positions | ConnectedPosition[] | "[ { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4, }, { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -8, }, ]" | — | no | CDK overlay connected positions that control where the popover appears relative to the trigger. | **Outputs:** | Output | Type | Description | |--------|------|-------------| | onPopoverShown | boolean | Emits true when the popover is opened and false when it is closed. | | onBackButtonClick | OverlayRef | Rarely used, kept from older designs. Never emits: the back button closes the popover. To react to closing, use (onPopoverShown). | ### SourcePopoverComponent (@3dsource/source-ui) **Selector:** `src-popover` · **Kind:** Component **Usage:** ```html Internal panel of src-popover-trigger and SourcePopoverService. Not intended for direct use. ``` ### SourceSliderGroupComponent (@3dsource/source-ui) **Selector:** `src-slider-group` · **Kind:** Component **Usage:** ```html ``` **Inputs:** | Input | Type | Default | Values | Required | Description | |-------|------|---------|--------|----------|-------------| | min | number | — | — | yes | The minimum value of the range. | | max | number | — | — | yes | The maximum value of the range. | | value | number | — | — | yes | The value of the slider. | | label | string | "" | — | no | Label text displayed above the slider. | | id | string | — | — | no | ID of the input to connect the label and input[type=range]. | | step | number | 1 | — | no | The step size of the slider. | | units | string | "%" | — | no | Units for input value (e.g., %, in, px). | | showTicks | boolean | false | — | no | Whether to show ticks at each step. | | showRange | boolean | false | — | no | Whether to show the range of the slider. | | isDisabled | boolean | false | — | no | Whether the slider is disabled. | | testID (alias: data-testid) | string | "" | — | no | Test ID for querying the slider in tests. | **Outputs:** | Output | Type | Description | |--------|------|-------------| | groupValueChange | number | Emits the value clamped to min and max: once on init, then when the user releases the thumb or commits the number field (Enter or blur). It does not emit while the thumb is dragged. | ### SourceTabLineComponent (@3dsource/source-ui) **Selector:** `src-tab-line` · **Kind:** Component **Usage:** ```html @switch (activeTab) { @case (0) { } @case (1) { } @case (2) { } } ``` **Inputs:** | Input | Type | Default | Values | Required | Description | |-------|------|---------|--------|----------|-------------| | tabs | SourceTabLineData[] | — | — | yes | Array of tab data objects. Each object must have a property matching the label input key. Type the array as SourceTabLineData[] or with a type alias; an interface without an index signature fails the binding. | | label | string | — | — | yes | The property key in each tab object used to display the tab label text. It is not the accessible name of the bar: that is ariaLabel. | | selectedIndex | number | 0 | — | no | Index of the currently selected tab. | | appearance | SourceTabAppearanceKeys | "default" | default, button | no | Visual style of the tab line. | | isCompact | boolean | false | — | no | If true, applies a more compact style with reduced padding and spacing. | | offsetBefore | number \| undefined | "undefined" | — | no | Padding in pixels before the first tab. Defaults to 16 (8 when isCompact). | | offsetAfter | number \| undefined | "undefined" | — | no | Padding in pixels after the last tab. Defaults to 16 (8 when isCompact). | | spaceBetween | number \| undefined | "undefined" | — | no | Gap in pixels between tabs. Defaults to 4 (0 when isCompact). | | isFullWidth | boolean | false | — | no | If true, tabs stretch to fill the available width evenly. | | isSwiper | boolean | false | — | no | If true, enables horizontal swipe scrolling for overflow tabs. | | testID (alias: data-testid) | string | "" | — | no | Test ID for querying the tab line in tests. | | ariaLabel | string \| null | "null" | — | no | Accessible name of the tab bar, set as aria-label on the tablist. Pass it when a page has more than one tab bar, so screen readers and browser agents can tell them apart. | **Outputs:** | Output | Type | Description | |--------|------|-------------| | onSelectTab | number | Emits the index of the selected tab when the user clicks a tab. | ### SourceTabComponent (@3dsource/source-ui) **Selector:** `src-tab` · **Kind:** Component **Usage:** ```html Tab content here ``` **Inputs:** | Input | Type | Default | Values | Required | Description | |-------|------|---------|--------|----------|-------------| | isActive | boolean | false | — | no | If true, marks this tab as the currently active tab. | ### SourceTabsComponent (@3dsource/source-ui) **Selector:** `src-tabs` · **Kind:** Component **Usage:** ```html

@for (tab of tabs; track tab.title) { {{ tab.data }} }

``` **Inputs:** | Input | Type | Default | Values | Required | Description | |-------|------|---------|--------|----------|-------------| | label | string | — | — | yes | Determines the key in tabs object which is responsible for tab label. | | data | SourceTabData[] | — | — | yes | Array of tab objects. Each one needs `title` and `data` (SourceTabData), plus the property named by `label` when it is not `title`. Tab content does not come from here: put one `` per tab inside `` and bind its `isActive` to the selected index. | | selectedIndex | number | 0 | — | no | Index of the tab that is selected. | | headerTemplate | TemplateRef | — | — | no | Custom template that replaces the whole tab line. Render the tabs from your own data and handle the clicks there: onSelectTab does not fire from a custom header. | | isCompact | boolean | false | — | no | If true, the tab line will have a more compact style with reduced padding and spacing. | | isFullWidth | boolean | false | — | no | If true, the tab line will stretch to fill the available width. | | isSwiper | boolean | false | — | no | If true, the tab line will be swipeable, allowing horizontal scrolling for overflow tabs. | | swiperConfig | SwiperOptions | — | — | no | Not used: src-tabs does not pass it to the tab line. | | testID (alias: data-testid) | string | "" | — | no | Test ID of the inner tab line; the tab panels are outside it. Not applied when headerTemplate is set. | **Outputs:** | Output | Type | Description | |--------|------|-------------| | onSelectTab | number | Emits the index of the selected tab when the user clicks a tab. | ### SourceTooltipOverlayComponent (@3dsource/source-ui) **Selector:** `src-tooltip-overlay` · **Kind:** Component **Usage:** ```html Internal panel of [srcTooltip]. Not intended for direct use. ``` ### SourceTooltipDirective (@3dsource/source-ui) **Selector:** `[srcTooltip]` · **Kind:** Directive **Usage:** ```html

Modified recently ``` **Inputs:** | Input | Type | Default | Values | Required | Description | |-------|------|---------|--------|----------|-------------| | srcTooltip | string \| TemplateRef | — | — | yes | Tooltip content. Pass a plain string for simple hints, or a TemplateRef for rich content (icons, formatted text, keyboard hints). | | srcTooltipPosition | SourceTooltipPositionKeys | "top" | top, bottom, left, right | no | Preferred position relative to the trigger. Near a viewport edge it adjusts in two ways: if the requested side does not fit it flips to the opposite side, and if the side fits but a centered tooltip would overflow it keeps the side and shifts the alignment toward the trigger (start or end) so the arrow stays on the trigger. | | srcTooltipHideDelay | number | 100 | — | no | Delay in milliseconds before the tooltip hides after the pointer leaves the trigger or tooltip. Cannot be less than 100ms to prevent flickering while hovering. | | srcTooltipMaxWidth | string | "280px" | — | no | Max width of the tooltip surface. | | srcTooltipCustomClass | string | "" | — | no | Extra CSS class on the tooltip root (.src-tooltip). The tooltip renders outside the component, so style it in global styles, for example .src-tooltip.my-class { --srcTooltipBg: ...; }. | | srcTooltipLongPressDelay | number | 500 | — | no | Long-press duration in milliseconds for touch devices. | | srcTooltipMoveThreshold | number | 10 | — | no | Movement tolerance in pixels during touch. If the finger moves more than this before the long-press timer fires, the long-press is cancelled. | | srcTooltipDisabled | boolean | false | — | no | When true, the tooltip does not show on hover or touch, and closes if open. It does nothing on its own -- you set it from your own condition, like [srcTooltipDisabled]="isMobile()", to choose when tooltips show. | | srcTooltipScrollStrategy | ScrollStrategy \| null | "null" | — | no | CDK scroll strategy for the tooltip overlay. When null it defaults to reposition(), so the tooltip stays pinned to the trigger while a scrollable ancestor scrolls. Pass inject(Overlay).scrollStrategies.close() to dismiss the tooltip on scroll instead. Each trigger needs its own instance: a shared one throws 'Scroll strategy has already been attached.' The scrollable ancestor must carry the cdkScrollable directive (CdkScrollable from @angular/cdk/scrolling). | | srcTooltipBackdropClass | string \| string[] | "cdk-overlay-transparent-backdrop" | — | no | CSS class (or list of classes) applied to the CDK backdrop used in touch mode. Tapping the backdrop dismisses the tooltip. | | srcTooltipTouchGestures | 'auto' \| 'off' | "auto" | — | no | Works only on touch screens. 'auto': press and hold to show the tooltip. 'off': do not show it on touch. The mouse still works the same. | | sourceTooltipData | SourceTooltipData | — | — | no | Optional config object that replaces srcTooltipMaxWidth, srcTooltipHideDelay, srcTooltipPosition and srcTooltipCustomClass in one go. All four fields are required; when it is set, those inputs are ignored. | ## Optional - [Full documentation](./docs/llms-full.txt): Every guide plus all component APIs inlined — use it when the links above cannot be followed