---
url: https://plugin.stripo.email/extensions/reference/types/EmojiPopoverOptions.md
---
# EmojiPopoverOptions

Interface defining configuration options for emoji picker popovers in the Stripo Email Editor Extensions SDK.

```typescript
interface EmojiPopoverOptions
```

## Description

The `EmojiPopoverOptions` interface configures emoji picker popovers that can be anchored to specific elements in the editor. It provides a user-friendly way to insert emojis into email content, supporting search functionality and emoji categories.

## Import

```typescript
import { EmojiPopoverOptions } from '@stripoinc/ui-editor-extensions';
```

## Properties

### targetElement

HTML element that the popover anchors to.

```typescript
targetElement: HTMLElement
```

#### Type

`HTMLElement`

#### Usage Notes

* Required for computing popover placement
* Should be a visible element in the DOM
* Typically a button or the text input where emoji will be inserted
* Popover positioning is calculated relative to this element

#### Example

```typescript
{
    targetElement: container.querySelector('.emoji-button') 
}
```

***

### preferredSides

Ordered array of preferred placement sides for the popover.

```typescript
preferredSides: PopoverSide[]
```

#### Type

`PopoverSide[]` - Array of placement preferences

#### PopoverSide Enum

```typescript
enum PopoverSide {
    TOP = 'top',
    RIGHT = 'right',
    BOTTOM = 'bottom',
    LEFT = 'left'
}
```

#### Usage Notes

* Defines fallback positioning when space is constrained
* First available position in the array is used
* If no preferred sides fit, the popover auto-positions
* Order matters - earlier positions have higher priority

#### Example

```typescript
{
    preferredSides: [PopoverSide.BOTTOM, PopoverSide.TOP]
}
```

***

### onResult

Callback function invoked when an emoji is selected.

```typescript
onResult: (response: string) => void
```

#### Type

`(response: string) => void`

#### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| response | `string` | The selected emoji character |

#### Usage Notes

* Called when user selects an emoji from the picker
* Not called if user closes the popover without selection
* The response is the actual emoji character (e.g., "😀")
* Use this to insert the emoji into your content

#### Example

```typescript
{
    onResult: (emoji: string) => {
        console.log('Selected emoji:', emoji);
        // Insert emoji into content
    }
}
```