<Component initialState={{ show: false }}>

  {({ state, setState }) => (

    <div style={{ display: 'flex', alignItems: 'center' }}>

      <Button

        onClick={() => setState({ show: !state.show })}

        marginRight={16}

      >

        Toggle show

      </Button>

      <Tooltip

        placement="right"

        show={state.show}

        trigger={<Icon title="Edit" icon="edit" />}

        content="Edit feature"

      />

    </div>

  )}

</Component>

<div style={{ display: 'flex', justifyContent: 'space-between' }}>

  <Tooltip

    placement="top"

    trigger={

      <Button>

        <Icon title="Top" color="white" icon="arrow-up" />

      </Button>

    }

    content="Top"

  />

  <Tooltip

    placement="left"

    trigger={

      <Button>

        <Icon title="left" color="white" icon="arrow-left" />

      </Button>

    }

    content="Left"

  />

  <Tooltip

    placement="right"

    trigger={

      <Button>

        <Icon title="right" color="white" icon="arrow-right" />

      </Button>

    }

    content="Right"

  />

  <Tooltip

    placement="bottom"

    trigger={

      <Button>

        <Icon title="bottom" color="white" icon="arrow-down" />

      </Button>

    }

    content="Bottom"

  />

</div>