A tooltip creation library built on top of floating-ui (unofficial)
npm install floating-ui-tooltipimport floatingTooltip from 'floating-ui-tooltip'; //... const props = { content: 'tooltip body', // ... } const tooltipInstance = floatingTooltip(target, props);floatingTooltip takes 2 arguments: target (type: HTMLElement) and props (type: Props) target is the HTML element we want the tooltip on.
Props is an object with the following properties:
Type: string | Element
Default: ''
Content for tooltip element.
Type: boolean
Default: true
If to append content as an HTML element to the tooltip.
Type: boolean
Default: true
Whether we want an arrow from tooltip pointing to the target element.
Type: number | [number | null, number | null]
Default: [300, 250]
First item in the array is the CSS property transition-duration when hiding the tooltip and second is when showing it.
Type: [number | undefined, number | undefined]
Default: [0, 0]
Offset's data type is an array of 2 numbers, the first number is the distance of the tooltip from x-axis of the element, and the second number is the distance of tooltip from y-axis of the target element.
Type: boolean
Default: true
When set to true, the offset will be the one passed in offset combined with the size of the arrow element.
Type: boolean | target
Default: true
If set to true: Clicking anywhere on the dom will hide the tooltip If set to target: Clicking on tooltip element will hide the tooltip
Type: (instance: Instance, event: MouseEvent) => void
Default: (instance: Instance, event: MouseEvent) => {}
Runs when click event is registered outside the tooltip or the reference element.
Type: (instance: Instance) => void
Default: (instance: Instance) => {}
Runs when tooltip is shown.
Type: (instance: Instance) => void
Default: (instance: Instance) => {}
Runs when tooltip is hidden.
Type: (oldState: TooltipState, newState: Partial<TooltipState>) => void
Default: (oldState: TooltipState, newState: Partial<TooltipState>) => {}
Method that runs on tooltip state change.
Type: () => void
Default: () => {}
Method that runs on calling the remove() method on tooltip.
Type: () => void
Default: () => {}
Runs right before the tooltip is created in the dom.
Type: () => void
Default: () => {}
Runs right after the tooltip is created in the dom.
Type: Placement
type Position = FUIPlacement | 'auto'; type Orientation = 'fixed' | 'auto'; type Placement = { position: Position; orientation: Orientation; }Default:
{ position: 'top', orientation: 'fixed' }position dictates where the tooltip should be positioned with respect to the target dom element. The default value is bottom.
Setting orientation to auto will make Lusift change the position of the tooltip if the tooltip overflows the document when rendered with the passed position value. Setting it to fixed prevents this behaviour. Default value is auto.
Type: boolean
Default: false
Type: boolean
Default: true
If set to true, the tooltip will dissapear when it is out of the viewport.
hideOnReferenceHidden
Type: boolean
Default: true
If set to true, the tooltip will dissapear when the target element is out of the viewport.
Type: boolean
Default: true
On true, the tooltip will show upon creation.
Type: boolean
Default: false
When set to true the document will scroll to the target element on the screen.
Type: number
Default: 350
Maximum width of the tooltip.
Type: number
Default: 1
arrowSizeScale is the multiple value you want to increase the tooltip arrow's size by.
Type: number
Default: 100
Set a limit to how frequently the update method can be triggered. Unit is milliseconds.
Type: number
Default: 99999
z-index of the tooltip element.
Type: number
Default: resize scroll
Events seperated by spaces that should trigger tooltip update.
Instance object that's returned by calling the tooltip method.
type Instance = { props: Props; reference: HTMLElement; tooltipElement: HTMLElement; getState: () => TooltipState; show: (toResetPosition?: boolean) => void; hide: () => void; remove: () => void; update: () => void; } type TooltipState = { isShown: boolean; isRemoved: boolean; fui: ComputePositionReturn | undefined; }Properties associated with the tooltip, passed and calculated
The target element of the tooltip
Dom element representating the tooltip
Method that returns the state object of the tooltip element
true if the tooltip is visible
true if the tooltip has been removed from the dom
fui is the floating-ui instance
Turns visibility on for tooltip, setting isShown state property to true.
Hides the tooltip. Sets isShown to false
Removes the tooltip from the dom. Sets isRemoved state property to true
Trigger the tooltip to update it's position for anchor or target element.