Status
The status of the component
Component checklist
Ready for use!
Repository
A link to the repo where the component lives.
gux-tooltip
This custom component is a simple tooltip.
When hovering a node, the tooltip will be shown below.
If there is not enough space on the bottom, or right of the component, the tooltip position will be adjusted.
Example usage
<!-- First option (With parentElement) -->
<div>
<button>Button</button>
<gux-tooltip>My great tooltip</gux-tooltip>
</div>
<!-- Second option (With parent id in for attribute) -->
<button id="needs-tooltip">Button</button>
<gux-tooltip for="needs-tooltip">My great tooltip</gux-tooltip>Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| accent | accent | "dark" | "light" | 'light' | |
| for | for | Indicates the id of the element the popover should anchor to. (If not supplied the parent element is used) | string | undefined |
| placement | placement | Placement of the tooltip. Default is bottom-start | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | 'bottom-start' |
Methods
hideTooltip() => Promise<void>
Returns
Type: Promise<void>
showTooltip() => Promise<void>
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| "content" | Slot for content |
Dependencies
Used by
- gux-copy-to-clipboard
- gux-pagination-ellipsis-button
- gux-table-toolbar-custom-action
- gux-tooltip-title
- gux-truncate
Graph
graph TD;
gux-copy-to-clipboard --> gux-tooltip
gux-pagination-ellipsis-button --> gux-tooltip
gux-table-toolbar-custom-action --> gux-tooltip
gux-tooltip-title --> gux-tooltip
gux-truncate --> gux-tooltip
style gux-tooltip fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS
gux-title-tooltip
Methods
setHideTooltip() => Promise<void>
Returns
Type: Promise<void>
setShowTooltip() => Promise<void>
Returns
Type: Promise<void>
Dependencies
Used by
Depends on
Graph
graph TD;
gux-tooltip-title --> gux-tooltip
gux-badge --> gux-tooltip-title
gux-tab --> gux-tooltip-title
gux-tab-advanced --> gux-tooltip-title
gux-tag --> gux-tooltip-title
style gux-tooltip-title fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS