Skip to content

Latest commit

 

History

History
209 lines (137 loc) · 7 KB

tooltip.md

File metadata and controls

209 lines (137 loc) · 7 KB
Raw

Tooltip

Wraps a child component and displays a message when the child is hovered or clicked on. Allows to be shown imperatively by calling .show() or .hide() on its reference.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { Tooltip } from 'chayns-components';

// ...

<Tooltip {...} />

Props

The Tooltip-component takes the following props:

Name Type Default Required
content { text: string, headline: string, imageUrl: string, buttonText: string, buttonOnClick: function } | { html: ReactNode } ✓
children ReactNode
bindListeners boolean false
position number
minWidth number 100
maxWidth number 250
removeIcon boolean typeof chayns !== 'undefined' ? chayns.env.isIOS : false
parent custom
coordinates { x: number, y: number }
childrenStyle { [key: string]: string | number }
childrenClassNames string
preventTriggerStyle boolean false
hideOnChildrenLeave boolean false
removeParentSpace boolean false
isIOS boolean typeof chayns !== 'undefined' ? chayns.env.isIOS : false

content

content: { text: string, headline: string, imageUrl: string, buttonText: string, buttonOnClick: function } | { html: ReactNode }

The content of the tooltip. Either specify an object with the accepted properties or render custom elements by passing an object like so: { html: <div /> }.

children

children?: ReactNode

The ReactNode the tooltip should refer to. If the children node is a <span> or <p> element, it will be decorated with a dotted underline.

bindListeners

bindListeners?: boolean

Wether mouseover and mouseleave listeners should be added to the children elements, which makes the tooltip automatically appear on hover.

position

position?: number

The position of the tooltip. 0 is top left, 1 is bottom left, 2 is bottom right and 3 is top right.

minWidth

minWidth?: number

The minimum width of the tooltip.

maxWidth

maxWidth?: number

The maximum width of the tooltip.

removeIcon

removeIcon?: boolean

Wether the close icon in the top right corner of the tooltip should be shown.

parent

parent?: custom

A DOM node the tooltip should be rendered into.

coordinates

coordinates?: { x: number, y: number }

An object with coordinates at which the tooltip should point.

childrenStyle

childrenStyle?: { [key: string]: string | number }

A React style object that is applied to the children.

childrenClassNames

childrenClassNames?: string

A classname string that should be applied to the children.

preventTriggerStyle

preventTriggerStyle?: boolean

Prevent adding an underline to the children.

hideOnChildrenLeave

hideOnChildrenLeave?: boolean

Hide the tooltip when the cursor leaves the children, even if the cursor is over the bubble.

removeParentSpace

removeParentSpace?: boolean

Removes any padding of the page from the tooltip position. This is only needed when the parent is padded to the page and is relatively positioned.

isIOS

isIOS?: boolean

Wether the target device is iOS (only relevant during serverside rendering).