# HelpMark



A help icon that reveals contextual information in a popover on hover or click. Ideal for showing tips, explanations, or supporting content without taking up extra space in the interface.

```tsx
import {HelpMark} from '@gravity-ui/uikit';
```

## Examples

Component with rendered raw html and close on mouse leave:





```tsx
<HelpMark onClick={() => console.log('just action happened')}>
  <b>Lorem ipsum</b> dolor sit{' '}
  <a href="https://example.com" target="_blank" rel="noreferrer">
    amet
  </a>
  , at scelerisque suspendisse
</HelpMark>
```



## Properties

`HelpMark` accepts any valid `button` element props in addition to these:

| Name         | Description                          |           Type           | Default |
| :----------- | :----------------------------------- | :----------------------: | :-----: |
| iconSize     | Sets icon size                       | `"s"` `"m"` `"l"` `"xl"` |  `"m"`  |
| popoverProps | Override `Popover` props             |      `PopoverProps`      |         |
| children     | Content displayed inside the popover |    `React.ReactNode`     |         |

Name	Description	Type	Default
iconSize	Sets icon size	`"s"` `"m"` `"l"` `"xl"`	`"m"`
popoverProps	Override `Popover` props	`PopoverProps`
children	Content displayed inside the popover	`React.ReactNode`

HelpMark

§Examples

§Properties

Examples

Properties