Skip to content

Latest commit

 

History

History

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