a hover and focus bubble on a trigger. in HTML it is pure CSS; the Angular directive portals the same bubble into a CDK overlay.
Example
<span class="lucent-tooltip-host" aria-describedby="tip-19">
<span class="lucent-button lucent-button--secondary lucent-button--md">
<button class="lucent-button__inner" type="button">
<span class="lucent-button__label">Hover me</span>
</button>
</span>
<span class="lucent-tooltip lucent-tooltip--top" role="tooltip" id="tip-19">Saves your changes</span>
</span><lucent-button variant="secondary" lucentTooltip="Saves your changes">Hover me</lucent-button>
Using it
| Angular | [lucentTooltip] import { LucentTooltip } from '@design-foundry/lucent-angular'; |
| Stylesheet | .lucent-tooltip @design-foundry/lucent-styles/core.css |
API
| Name | Kind | Type | Default | Description |
|---|---|---|---|---|
| lucentTooltip | input | string | '' | bubble text. |
| lucentTooltipPosition | input | top | bottom | left | right | top | placement. |
Theming