Toolip UI

Tooltip is a UI components similar to Toolbar, to change elements on the canvas, reorder and align them. Toolip is not fixed and will be rendered near selected elements.

In current Polotno version Tooltip is disabled by default. Most likely it will be enabled by default in the next major release.

Basic usage:

import Toolbar from 'polotno/toolbar/toolbar';
import Workspace from 'polotno/canvas/workspace';
import { Tooltip } from 'polotno/canvas/tooltip';

const App = ({ store }) => {
  return (
    <div
      style={{
        display: 'flex',
        height: '100%',
        margin: 'auto',
        flex: 1,
        flexDirection: 'column',
        position: 'relative',
      }}
    >
      <Toolbar store={store} />
      <Workspace store={store} components={{ Tooltip }} />
    </div>
  );
};

How to customize Tooltip?

Similar to Toolbar, Tooltip supports special components property to add/change/remove most of its UI components.

To do that you need pass a component with a name in format TypeName, where type refer to type of element. For example TextFill. You can use all built-element types as Text, Image, Svg. But also you can use Many prefix when several elements are selected. Also you can define your own new components for any element type. E.g. ImageAlertButton

Open Demo

import { observer } from 'mobx-react-lite';
import Toolbar from 'polotno/toolbar/toolbar';
import Workspace from 'polotno/canvas/workspace';
import { Tooltip } from 'polotno/canvas/tooltip';
import { observer } from 'mobx-react-lite';

const MyColorPicker = observer(({ store, element, elements }) => {
  // store - main polotno store object
  // elements - array of selected elements. The same as store.selectedElements
  // element - first selected element. The same as store.selectedElements[0]
  return (
    <div>
      <input
        type="color"
        value={element.fill}
        onChange={(e) => {
          element.set({
            fill: e.target.value,
          });
        }}
      />
    </div>
  );
});

const App = ({ store }) => {
  return (
    <div
      style={{
        display: 'flex',
        height: '100%',
        margin: 'auto',
        flex: 1,
        flexDirection: 'column',
        position: 'relative',
      }}
    >
      <Workspace
        store={store}
        components={{
          Tooltip,
          TextFill: MyColorPicker,
        }}
      />
    </div>
  );
};