Tooltip

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.

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',
      }}

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

How to customize Tooltip?

How to disable Tooltip?

News, updates and promos – be the first to get 'em

Tooltip

How to customize Tooltip?​

How to disable Tooltip?​

News, updates and promos – be the first to get 'em

How to customize Tooltip?

How to disable Tooltip?