Texttip

Overview

ds-texttip is for displaying simple, plain text only tooltips, and uses the content inside the html data-attribute data-ds-texttip for the content. By default there is no requirement to add any classes.

For tooltips that use rich formatted content, see ds-richtip

Options

Basic usage

Basic usage - text (hover over example to view)

html

Copy

Text content

Basic usage - inline text (hover over example to view)

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.

Basic usage - icon (hover over example to view)

html

Copy

Basic usage - button (hover over example to view)

html

Copy

Tip Position

By adding the appropriate --tip-* class, the position of the tip can be changed.

html

Copy

The following positions are available - (hover over labels to view examples):

	--tip-top-left	--tip-top	--tip-top-right
--tip-left-top				--tip-right-top
--tip-left		default (top)		--tip-right
--tip-left-bottom				--tip-right-bottom
	--tip-bottom-left	--tip-bottom	--tip-bottom-right

Visual states

Visual states (hover over examples to view)

html

Copy

Alert example

Warning example

Success example

Info example

Component colors

Text example (hover over example to view)

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.

Button example (hover over example to view)

html

Copy

Examples

Icon text tip inside label

Basic usage - icon (hover over example to view)

html

Copy

Label text

Manifest

The component manifest describes this component's API: its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.

Latest version: https://assets.soracom.io/sds/latest/ds-texttip/manifest.json

manifest.json

Copy