sp-tooltip

Examples API

Attributes and Properties #

Property Attribute Type Default Description
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 #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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>