Tooltip UI

Tooltip, a UI component similar to Toolbar, is designed to change elements on the canvas, reorder and align them. It is rendered next to a selected element – a behavior you can modify.

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 you can also use Many prefix when several elements are selected. And you can define your own new components for any element type. E.g. ImageAlertButton

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>
  );
};

How to disable Tooltip?

You can pass Tooltip component that renders null to disable it.

import Toolbar from 'polotno/toolbar/toolbar';
import Workspace from 'polotno/canvas/workspace';

const Tooltip = () => null;

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>
  );
};