---
title: "FloatingToolbarManager | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/FloatingToolbarManager/"
---

# FloatingToolbarManager

> Floating Toolbar modes.

## Enumerations

### FloatingToolbarMode

#### Enumeration Members

| Enumeration Member | Value | Description |
| ------ | ------ | ------ |
|  `Classic` | `"Classic"` | Displays the toolbar on the canvas regardless of user hover. |
|  `Inside` | `"Inside"` | Displays the toolbar on top of images and image placeholders when the user hovers over the item. |

## Classes

### FloatingToolbarManager

#### Constructors

##### Constructor

```ts
new FloatingToolbarManager(
   canvasElementHandler, 
   viewer, 
   canvas, 
   selectionHandler, 
   config?): FloatingToolbarManager;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `canvasElementHandler` | [`CanvasElementHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/CanvasElementHandler.md#canvaselementhandler) |
| `viewer` | [`Viewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Viewer-1.md#viewer) |
| `canvas` | [`Canvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Canvas-1.md#canvas) |
| `selectionHandler` | [`SelectionHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/SelectionHandler.md#selectionhandler) |
| `config?` | [`IFloatingItemToolbarConfig`](#ifloatingitemtoolbarconfig) |

###### Returns

[`FloatingToolbarManager`](#floatingtoolbarmanager)

#### Accessors

##### configuration

###### Set Signature

```ts
set configuration(conf): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `conf` | [`IFloatingItemToolbarConfig`](#ifloatingitemtoolbarconfig) |

###### Returns

`void`

##### enabled

###### Get Signature

```ts
get enabled(): boolean;
```

###### Returns

`boolean`

###### Set Signature

```ts
set enabled(v): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `v` | `boolean` |

###### Returns

`void`

##### eventManager

###### Set Signature

```ts
set eventManager(eventManager): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `eventManager` | [`EventManager`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/EventManager.md#eventmanager) |

###### Returns

`void`

#### Methods

##### dispose()

```ts
dispose(): void;
```

###### Returns

`void`

## Interfaces

### IFloatingItemToolbarConfig

A structure defining appearance of the Floating Item Toolbar.

#### Example

```js
configuration = {
   canvas: {
       floatingToolbar: {
           enabled: true,
           mode: "Inside",
           buttons: [ "Handle", "Select", "Edit" ]
       }
   }
};
```

#### Properties

##### bigButtonCssClass?

```ts
optional bigButtonCssClass?: string;
```

CSS class for big buttons in the toolbar.

##### buttons?

```ts
optional buttons?: FloatingToolbarButton[];
```

Array of buttons for the toolbar. The default buttons are `["Select", "Edit", "Delete"]`.

##### cssClass?

```ts
optional cssClass?: string;
```

CSS class to apply to the Floating Item toolbar.

##### deleteButtonClass?

```ts
optional deleteButtonClass?: string;
```

CSS class for the **Delete** button.

##### editButtonClass?

```ts
optional editButtonClass?: string;
```

CSS class for the **Edit** button.

##### enabled?

```ts
optional enabled?: boolean;
```

If `true`, displays the floating item toolbar. The default value is `true`.

##### handleButtonClass?

```ts
optional handleButtonClass?: string;
```

CSS class for the **Handle** button.

##### mode?

```ts
optional mode?: FloatingToolbarMode;
```

Specifies the mode of the Floating Item Toolbar. The default value is `FloatingToolbarMode.Classic`.

##### selectButtonClass?

```ts
optional selectButtonClass?: string;
```

CSS class for the **Select** button.

## Type Aliases

### FloatingToolbarButton

```ts
type FloatingToolbarButton = "Handle" | "Select" | "Edit" | "Delete";
```