ebay-tooltip

EbayTooltip

Demo

Storybook

Import JS

import { EbayTooltip, EbayTooltipHost, EbayTooltipContent } from '@ebay/ui-core-react/ebay-tooltip'

Import following styles from SKIN

import "@ebay/skin/tooltip"

or if using SCSS/CSS

import "@ebay/skin/tooltip.css"

Usage

yarn add @ebay/ui-core-react

<EbayTooltip pointer="bottom-left">
    <EbayTooltipHost>
        <EbayButton>Info</EbayButton>
    </EbayTooltipHost>
    <EbayTooltipContent>
        <span>Here's a tip to help you be successful at your task.</span>
    </EbayTooltipContent>
</EbayTooltip>

Attributes

Name	Type	Stateful	Required	Description
pointer	String	No	No	options are top-left, top, top-right, right, right-bottom, right-top, bottom-left, bottom-right, bottom, left, left-bottom, left-top
overlayStyle	Object	No	No	Style object to customize default values for the overlay. It can be used all CSS properties like top, left, bottom, right.
noHover	Boolean	No	No	disable hover (and only use focus) to open the tooltip
onExpand	Function	No	No	overlay has been expanded
onCollapse	Function	No	No	overlay has been collapsed

Child components

Name	Required	Description
EbayTooltipHost	Yes	Wrapper for trigger that shows the tooltip
EbayTooltipContent	Yes	The content to be displayed in the tooltip