Tooltip

Overview

ds-tooltip is a Web Component that renders an accessible tooltip using the Popover API. It supports both icon and text trigger modes, plain text and rich HTML content, customizable positioning, and hover/focus interactions with a minimum visible duration.

Options

Basic usage

By default, the simplest tooltip renders an info icon, with the content of the ds-tooltip displayed on hover as a tooltip.

html

Copy

SIM ID identifies subscriber record.

Alternatively, for plain text tooltips the text attribute can be used instead of child elements.

html

Copy

Text anchor

Set type="ds-text" and provide inline content to use a text as the anchor that triggers instead of an icon. The child text becomes the clickable trigger, and the text attribute provides the popover body.

html

Copy

Anchor text

This works inline within an exising ds-text element as well:

html

Copy

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

Rich content

If you use the an icon anchor for the tooltip, the popover supports any HTML content, including structured layouts using SDS classes.

html

Copy

Subscriber details

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments.

Status: Active

Plan: plan-US

Slotted content

Use slot="anchor" and slot="tip" for full control over both the trigger and popover content, including rich HTML with links and formatting.

html

Copy

Anchor text

Subscriber details

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments.

Status: Active

Plan: plan-US

Size

Use the size attribute to control the trigger size. In icon mode, the default is xsmall.

html

Copy

In text mode, no default size is applied. Use size to explicitly set one.

html

Copy

Small

Default

Large

Icons

Use the icon attribute to change the trigger icon.

html

Copy

Status shows whether the subscriber is active.

Add the icon attribute to display a right-aligned icon alongside the text trigger.

html

Copy

Anchor text

Component colors

Use the color attribute to set the trigger color. Works in both icon and text modes.

html

Copy

Status shows whether the subscriber is active.

html

Copy

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

Position

The tooltip position defaults to top. Use the position attribute to change placement.

html

Copy

All 12 positions are available:

Drag the table to move it near the frame edges, or resize the frame from its bottom-right corner. Tooltips will automatically reposition to stay visible.

Attributes

Attribute	Values	Default	Description
`type`	`"ds-text"`, `"ds-icon"`	`ds-icon`	Sets the trigger mode. `"ds-text"` uses inline text as the trigger instead of an icon.
`text`	Plain text string	—	Sets the popover content as plain text. Used when no child elements provide popover content.
`anchor-aria-label`	String	`"Show tooltip"`	Sets the `aria-label` on the anchor/trigger element for accessibility. In text mode, defaults to empty.
`position`	See position table	`top`	Controls the tooltip placement relative to the trigger.
`icon`	SDS icon name	`info`	Sets the trigger icon (e.g. `online-solid`, `help`). Only applies in icon mode.
`size`	SDS size value	`xsmall` (icon mode only)	Sets the trigger size (e.g. `2xsmall`, `small`, `medium`). Applies in both icon and text modes.
`color`	SDS color name	—	Sets the trigger color (e.g. `celeste`, `magenta`). Applies in both icon and text modes.
`anchor-class`	CSS class string	—	Additional CSS classes appended to the trigger element.
`tip-class`	CSS class string	—	Additional CSS classes appended to the popover element.
`css`	`"shadow"`	Light DOM	Set to `"shadow"` to use Shadow DOM with self-loaded SDS stylesheets.

Slots

Slot	Description
`anchor`	Custom trigger content for text mode. Replaces the default text node as the trigger.
`tip`	Custom popover content. Supports rich HTML with links and formatting.
(default)	Child content without a slot attribute. Used as popover content in icon mode, or as trigger text in text mode (with `text` attribute providing the popover).

Behaviour

Shows on hover and keyboard focus
Remains visible for at least 500ms after the pointer leaves
Stays open while the pointer is over the popover content, allowing interaction with links
Automatically repositions when the viewport constrains the preferred position (e.g. a top tooltip flips to bottom if there is no room above)
Only one tooltip is visible at a time — opening a new tooltip closes any other
Closes when clicking outside the tooltip or pressing Escape
Uses the Popover API for proper layering and accessibility
Automatically wires aria-describedby between trigger and popover

Angular usage

ds-tooltip is a standard Web Component and works in Angular templates like any other native element. Two setup steps are needed.

Registering the element

Import the component once at app startup (e.g. in main.ts) so the custom element is defined before any template renders it:

Copy

Allowing the tag in templates

Add CUSTOM_ELEMENTS_SCHEMA to every NgModule whose templates use <ds-tooltip> (or to standalone components via schemas):

Copy

Without this, Angular errors with NG8001: 'ds-tooltip' is not a known element.

Usage examples

Angular interpolation, attribute bindings, and pipes all work as expected:

html

Copy

Examples

Usage in a table header

html

Copy

Name	Status	Plan The subscription plan assigned to this SIM.
SIM-001	Active	plan-US
SIM-002	Inactive	plan-K2

Usage in a label

html

Copy

SIM ID The unique identifier assigned to the subscriber record.

Automatic placement

html

Copy

SIM ID

Subscriber details

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments.

Status: Active

Plan: plan-US