# Tooltip (fw-tooltip)
Tooltips are used to show additional information on a target during hover interactions.
# Demo & Usage
# Basic demo
Show Code
# Basic usage
# Placement demo
Hover over the tiles:
Show Code
# Triggers demo
Activating through click:
Activating through hover:
Activating through manual trigger outside tooltip:
Show Code
# Triggers usage
# HTML in Tooltip
This tooltip has HTML content.
Show Code
# HTML in tooltip Usage
# Hoisting
Show Code
# Hoisting usage
# Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
content | content | Content of the tooltip. | string | '' |
distance | distance | Distance defines the distance between the popover trigger and the popover content along y-axis. | string | '10' |
fallbackPlacements | -- | Alternative placement for popover if the default placement is not possible. | [PopoverPlacementType] | ['top'] |
hoist | hoist | Option to prevent the tooltip from being clipped when the component is placed inside a container with overflow: auto\|hidden\|scroll . | boolean | false |
placement | placement | Placement of the popover content with respect to the popover trigger. | "bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start" | 'top' |
trigger | trigger | The trigger event on which the popover-content is displayed. The available options are 'click' | 'manual' | 'hover', in case of 'manual' no trigger event will be set. | "click" \| "hover" \| "manual" | 'hover' |
# Methods
# hide() => Promise<boolean>
Hides the tooltip.
# Returns
Type: Promise<boolean>
promise that resolves to true
# show() => Promise<boolean>
Shows the tooltip.
# Returns
Type: Promise<boolean>
promise that resolves to true
# Dependencies
# Used by
# Depends on
# Graph
graph TD;
fw-tooltip --> fw-popover
fw-custom-cell-paragraph --> fw-tooltip
fw-data-table --> fw-tooltip
fw-datepicker --> fw-tooltip
fw-file-2 --> fw-tooltip
fw-tag --> fw-tooltip
style fw-tooltip fill:#f9f,stroke:#333,stroke-width:4px
Built with ❤ at Freshworks