55 lines
1.5 KiB
Markdown
55 lines
1.5 KiB
Markdown
# HelpButton
|
|
|
|
HelpButton is used for a action on a page
|
|
|
|
### Usage
|
|
|
|
```js
|
|
import { HelpButton } from "@docspace/shared/components/help-button";
|
|
```
|
|
|
|
```jsx
|
|
<HelpButton tooltipContent={<Text>Tooltip content</Text>} />
|
|
```
|
|
|
|
#### Usage with link
|
|
|
|
```jsx
|
|
<HelpButton
|
|
tooltipContent={
|
|
<Text>
|
|
Tooltip content with{" "}
|
|
<Link isHovered={true} href="/">
|
|
link
|
|
</Link>
|
|
</Text>
|
|
}
|
|
/>
|
|
```
|
|
|
|
#### Usage with aside
|
|
|
|
```jsx
|
|
<HelpButton
|
|
tooltipContent={
|
|
<>
|
|
<p>This is a global react component tooltip</p>
|
|
<p>You can put every thing here</p>
|
|
<ul>
|
|
<li>Word</li>
|
|
<li>Chart</li>
|
|
<li>Else</li>
|
|
</ul>
|
|
</>
|
|
}
|
|
/>
|
|
```
|
|
|
|
### Properties
|
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
| ------------------------- | :------: | :------: | :-------------------------: | :-----: | ------------------------------------------------ | --- | ---- | -------- | --- | --- | --- | ---------- |
|
|
| `className` | `string` | - | - | - | Accepts class |
|
|
| `displayType` | `oneOf` | - | `dropdown`, `aside`, `auto` | `auto` | Tooltip display type |
|
|
| `helpButtonHeaderContent` | `string` | - | - | - | Tooltip header content (tooltip opened in aside) | | `id` | `string` | - | - | - | Accepts id |
|