@ebay/ui-core-react
Version:
Skin components build off React
78 lines (59 loc) • 4.64 kB
Markdown
# EbayInfotip
## Demo
[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/buttons-ebay-infotip--default)
## Import JS
```jsx harmony
import { EbayInfotip, EbayInfotipHost, EbayInfotipContent, EbayInfotipHeading } from "@ebay/ui-core-react/ebay-infotip";
```
## Import following styles from SKIN
```jsx harmony
import "@ebay/skin/infotip";
import "@ebay/skin/icon-button";
```
### or if using SCSS/CSS
```jsx harmony
import "@ebay/skin/infotip.css";
import "@ebay/skin/icon-button.css";
```
## Usage
```
yarn add @ebay/ui-core-react
```
```jsx harmony
<EbayInfotip>
<EbayInfotipHeading>Heading</EbayInfotipHeading>
<EbayInfotipContent>
<p>Here's a tip to help you be successful at your task.</p>
</EbayInfotipContent>
</EbayInfotip>
```
```jsx harmony
<EbayInfotip variant="modal">
<EbayInfotipContent>
<p>Here's a tip to help you be successful at your task.</p>
</EbayInfotipContent>
</EbayInfotip>
```
## EbayInfotip Attributes
| Name | Type | Stateful | Required | Description |
| ----------------- | -------- | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `variant` | String | No | No | Either modal or default. If modal will show the mobile version of infotip |
| `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` |
| `icon` | String | No | No | Different icon to be used than `information-small`. Full list [here](https://ebay.github.io/skin/index.html#icon) |
| `disabled` | Boolean | No | No | Define if the infotip is disabled or not |
| `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 |
| `a11yCloseText` | String | No | Yes | A11y text for close button and mask. |
| `aria-label` | String | No | Yes | A descriptive label of what the infotip 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 |
| -------------------- | -------- | ------------------------------------------------ |
| `EbayInfotipHost` | No | The custom host-button (trigger) for the Infotip |
| `EbayInfotipHeading` | No | The heading to be displayed in the infotip |
| `EbayInfotipContent` | Yes | The content to be displayed in the infotip |
## EbayInfotipHost Attributes
| Name | Type | Stateful | Required | Description |
| ------------ | ------ | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `aria-label` | String | No | Yes | A descriptive label of what the infotip button represents (e.g. "Important information"). Will overwrite `ariaLabel` prop from the `EbayInfotip` |