sp-tooltip

Examples

API

Attributes and Properties #

Property	Attribute	Type	Default
`dir`	`dir`	`'ltr' \| 'rtl'`	`'ltr'`
`offset`	`offset`	`number`	`6`
`open`	`open`	`boolean`	`false`
`placement`	`placement`	`"auto" \| "auto-start" \| "auto-end" \| "top" \| "bottom" \| "right" \| "left" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "right-start" \| "right-end" \| "left-start" \| "left-end" \| "none"`	`'top'`
`selfManaged`	`self-managed`	`boolean`	`false`
`variant`	`variant`	`string`

Slots #

Name	Description
`icon`	the icon element appearing at the start of the label
`default slot`	the text label of the Tooltip

CSS Custom Properties #

Name	Default
`--spectrum-picker-m-texticon-popover-offset-y`	`var(--spectrum-global-dimension-size-75)`
`--spectrum-tooltip-info-background-color`	`var(--spectrum-semantic-informative-background-color)`
`--spectrum-tooltip-negative-background-color`	`var(--spectrum-semantic-negative-background-color)`
`--spectrum-tooltip-neutral-background-color`	`var(--spectrum-semantic-neutral-background-color-default)`
`--spectrum-tooltip-neutral-border-radius`	`var(--spectrum-alias-component-border-radius)`
`--spectrum-tooltip-neutral-icon-margin-x`	`var(--spectrum-global-dimension-size-85)`
`--spectrum-tooltip-neutral-icon-margin-y`	`var(--spectrum-global-dimension-size-50)`
`--spectrum-tooltip-neutral-icon-size`	`var(--spectrum-global-dimension-size-200)`
`--spectrum-tooltip-neutral-max-width`	`var(--spectrum-global-dimension-size-2000)`
`--spectrum-tooltip-neutral-min-height`	`var(--spectrum-global-dimension-size-300)`
`--spectrum-tooltip-neutral-padding-x`	`var(--spectrum-global-dimension-size-85)`
`--spectrum-tooltip-neutral-text-color`	`var(--spectrum-global-color-static-white)`
`--spectrum-tooltip-neutral-text-font-weight`	`var(--spectrum-alias-body-text-font-weight)`
`--spectrum-tooltip-neutral-text-line-height`	`var(--spectrum-alias-component-text-line-height)`
`--spectrum-tooltip-neutral-text-margin-bottom`	`undefined`
`--spectrum-tooltip-neutral-text-margin-top`	`var(--spectrum-global-dimension-static-size-50)`
`--spectrum-tooltip-neutral-text-size`	`var(--spectrum-global-dimension-font-size-75)`
`--spectrum-tooltip-neutral-tip-height`	`var(--spectrum-global-dimension-size-50)`
`--spectrum-tooltip-neutral-tip-margin`	`var(--spectrum-global-dimension-size-50)`
`--spectrum-tooltip-neutral-tip-width`	`var(--spectrum-global-dimension-size-100)`
`--spectrum-tooltip-positive-background-color`	`var(--spectrum-semantic-positive-background-color)`

Description #

sp-tooltip allow users to get contextual help or information about specific components when hovering or focusing on them.

Usage #

yarn add @spectrum-web-components/tooltip

Import the side effectful registration of <sp-tooltip> via:

import '@spectrum-web-components/tooltip/sp-tooltip.js';

When looking to leverage the Tooltip base class as a type and/or for extension purposes, do so via:

import { Tooltip } from '@spectrum-web-components/tooltip';

Example #

Tooltips can be top, bottom, left, or right.

<sp-tooltip open placement="top">Label</sp-tooltip>
<br />
<br />
<sp-tooltip open placement="bottom">Label</sp-tooltip>
<br />
<br />
<sp-tooltip open placement="left">Label</sp-tooltip>
<br />
<br />
<sp-tooltip open placement="right">Label</sp-tooltip>

Variants #

Informative #

This is the informative or info variant of Tooltip

<sp-tooltip open placement="top" variant="info">Label</sp-tooltip>
<sp-tooltip open placement="top" variant="info">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
</sp-tooltip>
<sp-tooltip open placement="top" variant="info">
    <sp-icon-info slot="icon" size="s"></sp-icon-info>
    Label
</sp-tooltip>
<sp-tooltip open placement="top" variant="info">
    <sp-icon-info slot="icon" size="s"></sp-icon-info>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
</sp-tooltip>

Positive #

This is the postive (a.k.a.) success variant of Tooltip

<sp-tooltip open placement="top" variant="positive">Label</sp-tooltip>
<sp-tooltip open placement="top" variant="positive">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
</sp-tooltip>
<sp-tooltip open placement="top" variant="positive">
    <sp-icon-checkmark-circle slot="icon" size="s"></sp-icon-checkmark-circle>
    Label
</sp-tooltip>
<sp-tooltip open placement="top" variant="positive">
    <sp-icon-checkmark-circle slot="icon" size="s"></sp-icon-checkmark-circle>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
</sp-tooltip>

Negative #

This is the negative a.k.a. error variant of Tooltip

<sp-tooltip open placement="top" variant="negative">Label</sp-tooltip>
<sp-tooltip open placement="top" variant="negative">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
</sp-tooltip>
<sp-tooltip open placement="top" variant="negative">
    <sp-icon-alert slot="icon" size="s"></sp-icon-alert>
    Label
</sp-tooltip>
<sp-tooltip open placement="top" variant="negative">
    <sp-icon-alert slot="icon" size="s"></sp-icon-alert>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
</sp-tooltip>

Spectrum Web Components