# Tooltip (fw-tooltip)

Tooltips are used to show additional information on a target during hover interactions.

# Demo & Usage

# Basic demo

Show tooltip
Show Code

# Basic usage

# Placement demo

Hover over the tiles:


Show Code

# Triggers demo

Activating through click:

Click


Activating through hover:

Hover


Activating through manual trigger outside tooltip:


Show Name
Show Code

# Triggers usage

# HTML in Tooltip

Show tooltip
This tooltip has HTML content.
Show Code

# HTML in tooltip Usage

# Hoisting

No hoist Hoist
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
  style fw-tooltip fill:#f9f,stroke:#333,stroke-width:4px

Built with ❤ at Freshworks