@dotconnor/grommet
Version:
focus on the essential experience
65 lines (43 loc) • 1.23 kB
Markdown
## Tip
Tooltip or a hint when hovering over an element. The tooltip will render
when hovering on top of the Tip's child node or string.
[](https://storybook.grommet.io/?selectedKind=Controls-Tip&full=0&stories=1&panelRight=0) [](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/tip&module=%2Fsrc%2FTip.js)
## Usage
```javascript
import { Tip } from 'grommet';
<Tip />
```
## Properties
**content**
The tooltip content inside the drop.
```
node
```
**dropProps**
Any valid Drop prop to style the Tip drop container. Defaults to `{
"plain": true,
"trapFocus": false
}`.
```
object
```
**plain**
Whether content should have default styling.
```
boolean
```
## Theme
**tip.content**
Any valid Box property for the Tip container. Expects `object`.
Defaults to
```
{ background: 'background-contrast', elevation: 'small',
margin: 'xsmall', pad: { vertical: 'xsmall', horizontal: 'small' },
round: 'small'}
```
**tip.drop**
Any valid Drop property for the Tooltip. Expects `object`.
Defaults to
```
{align: { top: 'bottom' }}
```