# Tooltip

## Button tooltip

```js
const ref = React.useRef();
const [isShowing, setShowing] = React.useState(true);

<>
  <SilkeBox gap>
    <SilkeButton onClick={() => setShowing(!isShowing)} label="Toggle tooltip" />
    <SilkeButton ref={ref} label="Nuclear launch" kind="danger" />
  </SilkeBox>

  <SilkeTooltip anchor={ref} show={isShowing}>
    Tooltip on the bottom
  </SilkeTooltip>
  <SilkeTooltip anchor={ref} show={isShowing} anchorOrigin="top-center">
    Tooltop on the top
  </SilkeTooltip>
  <SilkeTooltip anchor={ref} show={isShowing} anchorOrigin="center-right">
    Tooltop on the right
  </SilkeTooltip>
  <SilkeTooltip anchor={ref} show={isShowing} anchorOrigin="center-left">
    Tooltop on the left
  </SilkeTooltip>
</>;
```

### Information tooltip

```js
const ref = React.useRef();
const [isShowing, setShowing] = React.useState(true);

<>
  <SilkeBox gap>
    <SilkeButton onClick={() => setShowing(!isShowing)} label="Toggle tooltip" />
    <SilkeButton ref={ref} label="Nuclear launch" kind="danger" />
  </SilkeBox>

  <SilkeTooltip kind="info" image={ipsum.image()} size="tiny" anchor={ref} show={isShowing}>
    Tooltip on the bottom
  </SilkeTooltip>
  <SilkeTooltip
    kind="info"
    size="small"
    title="Tooltip title"
    anchor={ref}
    image={ipsum.image()}
    show={isShowing}
    anchorOrigin="top-center"
  >
    Tooltop on the top
  </SilkeTooltip>
  <SilkeTooltip
    kind="info"
    size="base"
    image={ipsum.image()}
    title="Tooltip title"
    anchor={ref}
    show={isShowing}
    anchorOrigin="center-right"
  >
    Tooltop on the right
  </SilkeTooltip>
  <SilkeTooltip
    kind="info"
    size="large"
    image={ipsum.image()}
    title="Tooltip title"
    anchor={ref}
    show={isShowing}
    anchorOrigin="center-left"
  >
    Tooltop on the left
  </SilkeTooltip>
</>;
```

## Definition tooltip

```js
const [isShowing, setShowing] = React.useState(true);

<>
  <SilkeButton onClick={() => setShowing(!isShowing)} label="Toggle tooltip" />
  This is some text needing a{' '}
  <SilkeDefinitionTooltip
    tooltip="state or describe exactly the nature, scope, or meaning of."
    show={isShowing}
  >
    definition
  </SilkeDefinitionTooltip>{' '}
  for some words.
</>;
```

## Icon tooltip

```js
<>
  This icon has a tip <SilkeIconTooltip tooltip="This is the tip" />
  <br />
  Here's a tip with a shortcut{' '}
  <SilkeIconTooltip show tooltip="Using the keyboard saves time" shortcut="⌘+s" />
  <br />
  And this one has several, plus a custom icon{' '}
  <SilkeIconTooltip
    icon="check"
    tooltip="Move elements"
    shortcut={['up', 'right', 'down', 'left']}
  />
  <br />
  If you have link in tooltip then just add inteactive prop
  <SilkeIconTooltip
    icon="check"
    interactive
    tooltip={
      <>
        Read more about something{' '}
        <SilkeLink external href="https://www.vev.design">
          here
        </SilkeLink>
      </>
    }
  />
</>
```

## Interactive tooltip

```js
const anchor = React.useRef();
const [showing, setShowing] = React.useState(true);

<>
  <SilkeButton ref={anchor} onClick={() => setShowing(!showing)} label="Toggle tooltip" />
  <SilkeInteractiveTooltip
    anchor={anchor}
    show={showing}
    onFinished={() => setShowing(false)}
    steps={[
      {
        header: 'Header',
        text: 'This is step 0, press Next to go to the next step',
      },
      { header: "Here's step 1", text: 'Press finish to finish' },
    ]}
  />
</>;
```