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