ebay-tourtip

EbayTourtip

Demo

Storybook

Import JS

import {
    EbayTourtip,
    EbayTourtipHost,
    EbayTourtipContent,
    EbayTourtipHeading,
} from '@ebay/ui-core-react/ebay-tourtip'

Import following styles from SKIN

import '@ebay/skin/tourtip'

or if using SCSS/CSS

import '@ebay/skin/tourtip.css'

Usage

yarn add @ebay/ui-core-react

<EbayTourtip a11yCloseText='close' pointer='bottom'>
    <EbayTourtipHost>
        <EbayButton>Info</EbayButton>
    </EbayTourtipHost>
    <EbayTourtipHeading type='tourtip'>Title</EbayTourtipHeading>
    <EbayTourtipContent>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </EbayTourtipContent>
    <EbayTourtipFooter index='1 / 3'>
        <button className="fake-link">Back</button>
        <button className="btn btn--primary">Next</button>
    </EbayTourtipFooter>
</EbayTourtip>

EbayTourtip 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.
initialExpanded	Boolean	No	No	Open the tooltip on the initial render, needs to be true for the case of Tourtips
a11yCloseText	String	No	Yes	A11y text for close button and mask.
aria-label	String	No	Yes	A descriptive label of what the tourtip button represents (e.g. "Important information")
onExpand	Function	No	No	overlay has been expanded
onCollapse	Function	No	No	overlay has been collapsed

Child components

Name	Required	Description
EbayTourtipHost	Yes	The custom host-button (trigger) for the tourtip
EbayTourtipHeading	No	The heading to be displayed in the tourtip
EbayTourtipFooter	Yes	The footer to be displayed in the tourtip
EbayTourtipContent	Yes	The content to be displayed in the tourtip

EbayTourtipHost Attributes

Name	Type	Stateful	Required	Description
aria-label	String	No	Yes	A descriptive label of what the tourtip button represents (e.g. "Important information"). Will overwrite ariaLabel prop from the EbayTourtip

EbayTourtipFooter Attributes

Name	Type	Stateful	Required	Description
index	String	No	No	defines the text to be displayed as index of the Tourtip if any. e.g 1 - 3 meaning Tourtip 1 of 3