# Popover (next gen. continued)

## Definitions

Tooltip - is a floating bubble that contains textual content and opens only on hover, can be useful for ellipsis and such

Popover - is a general "pop"ing mechanism that handles mostly position stuff, but also some minor design issues (such as arrow and shadow)

## `wix-style-react` usage

| Tooltip | Popover             | Hybrid         |
| ------- | ------------------- | -------------- |
| Text    | Dropdown            | FloatingHelper |
| Tooltip | Search              |                |
|         | DropdownLayout      |                |
|         | AutoComplete        |                |
|         | InputWithOptions    |                |
|         | MultiSelectCheckbox |                |
|         | MultiSelect         |                |
|         | BadgeSelect         |                |
|         | DropdownPicker      |                |
|         | GoogleAddresInput   |                |
|         | DropdownBase        |                |
|         | Popover             |                |
|         | PopoverMenu         |                |
|         | StatsWidget         |                |

## Components Structure

### Popover

| Component           | Extends                          |
| ------------------- | -------------------------------- |
| DropdownLayout      | -                                |
| Popover             | -                                |
| DropdownBase        | Popover + DropdownLayout         |
| InputWithOptions    | Input + DropdownLayout           |
| DropdownPicker      | Text + Icon + DropdownLayout     |
| Dropdown            | InputWithOptions                 |
| Search              | InputWithOptions                 |
| AutoComplete        | InputWithOptions                 |
| MultiSelectCheckbox | InputWithOptions + Checkbox      |
| MultiSelect         | InputWithOptions                 |
| BadgeSelet          | Badge + Popover + DropdownLayout |
| GoogleAddresInput   | InputWithOptions                 |
| PopoverMenu         | Tooltip + Button                 |
| StatsWidget         | DropdownBase                     |

### Tooltip

| Component | Extends      |
| --------- | ------------ |
| Text      | EllipsedText |
| Tooltip   | -            |

## Tooltip future

### Direct users

| Component            |
| -------------------- |
| AddItem              |
| Checkbox             |
| FieldLabelAttributes |
| FormField            |
| ImageViewer          |
| Loader               |
| TableActionCell      |
| InputArea            |

## Dropdown

### One component that is strict but extendable

`<Dropdown>` - input based dropdown. Would support all the main features. Features are stricked. Supports both: single & multi values. Options builder. Value handlers like predicate is easy to apply. Accesibility is aligned.

#### Covers these components

| Component           | Extends                     |
| ------------------- | --------------------------- |
| Dropdown            | InputWithOptions            |
| Search              | InputWithOptions            |
| AutoComplete        | InputWithOptions            |
| MultiSelectCheckbox | InputWithOptions + Checkbox |
| MultiSelect         | InputWithOptions            |
| GoogleAddresInput   | InputWithOptions            |
| InputWithOptions    | Input + DropdownLayout      |

### Another component that can be used to construct

`<DropdownBase>` - very extendanble, api is based on downshift. Trigger component can be anything.