sp-tooltip
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 |
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>