Tooltip
<gstock-tooltip>
|
GstockTooltip
API
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
content
|
The tooltip’s content. If you need to display HTML, use the content slot instead.
|
string
|
''
|
|
disabled
|
Disables the tooltip so it won’t show when triggered. |
|
boolean
|
false
|
distance
|
The distance in pixels from which to offset the tooltip away from its target. |
number
|
8
|
|
hoist
|
Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
overflow: auto|hidden|scroll. Hoisting uses a fixed positioning strategy that works in many, but not all,
scenarios.
|
boolean
|
false
|
|
open
|
Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. |
|
boolean
|
false
|
placement
|
The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport. |
'top'
| 'top-start'
| 'top-end'
| 'right'
| 'right-start'
| 'right-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'left'
| 'left-start'
| 'left-end'
|
'top'
|
|
skidding
|
The distance in pixels from which to offset the tooltip along its target. |
number
|
0
|
|
color
|
Color of the tooltip. |
'primary' | 'secondary' | 'information'
|
'primary'
|
|
trigger
|
Controls how the tooltip is activated. Possible options include click, hover, focus, and manual. Multiple
options can be passed by separating them with a space. When manual is used, the tooltip must be activated
programmatically.
|
string
|
'hover focus'
|
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties .
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
gstock-after-hide-event
|
onGstockAfterHideEvent
|
Emitted after the tooltip closes and all animations are complete. | - |
gstock-after-show-event
|
onGstockAfterShowEvent
|
Emitted after the tooltip opens and all animations are complete. | - |
gstock-hide-event
|
onGstockHideEvent
|
Emitted when the tooltip closes. | - |
gstock-show-event
|
onGstockShowEvent
|
Emitted when the tooltip opens. | - |
Learn more about events .
Slots
| Name | Description |
|---|---|
default
|
The tooltip’s target element. Avoid slotting in more than one element, as subsequent ones will be ignored. |
content
|
The content to render in the tooltip. Alternatively, you can use the content attribute. |
Learn more about slots .
Methods
| Name | Description |
|---|---|
show(
)
|
Shows the tooltip |
hide(
)
|
Hides the tooltip |
Learn more about methods .
Custom Properties
| Name | Description | Default |
|---|---|---|
--max-width
|
The maximum width of the tooltip before its content will wrap. | |
--hide-delay
|
The amount of time to wait before hiding the tooltip when hovering. | |
--show-delay
|
The amount of time to wait before showing the tooltip when hovering. |
Learn more about custom properties .
CSS Parts
| Name | Description |
|---|---|
base
|
The component’s base wrapper, an <gstock-popup> element. |
base__popup
|
The popup’s exported popup part. Use this to target the tooltip’s popup container. |
base__arrow
|
The popup’s exported arrow part. Use this to target the tooltip’s arrow. |
body
|
The tooltip’s body where its content is rendered. |
Learn more about CSS parts .
Animations
| Name | Description |
|---|---|
tooltip.show
|
The animation to use when showing the tooltip. |
tooltip.hide
|
The animation to use when hiding the tooltip. |
Learn more about animations .
Dependencies
This component automatically imports the following dependencies.