Add and delete tooltips on shapes

Each shape and connector in a diagram can contain metadata or custom properties - extra information about those shapes.

A tooltip is a predefined shape property which appears when you hover over the shape or connector on the drawing canvas, or in the lightbox when viewing a published diagram.
Hover over a shape in the draw.io editor to see its tooltip

You can add a tooltip to a shape or connector via the menu, or by editing the shape properties.

Add a tooltip via the menu

  1. Select the shape or connector.
  2. Select Edit > Edit Tooltip, or press Alt+Shift+T.
    Select the shape or connector and click Edit > Edit Tooltip to add a tooltip
  3. Enter the tooltip in the text field of the Edit Tooltip dialog, then click Apply.
    Select the shape or connector and click Edit > Edit Tooltip to add a tooltip

Now, when you hover over the shape in the draw.io editor or lightbox, you’ll see the tooltip appear just below the mouse cursor.
Hover over a shape in the draw.io lightbox to see its tooltip

Edit the shape properties to add or edit a tooltip

  1. Right click on the shape or connector then select Edit Data from the context menu. Alternatively, press Ctrl+M on Windows or Cmd+M on macOS.
    Edit the shape properties via the context menu to add a tooltip
  2. Type tooltip into the text field where it says Enter Property Name, then click Add Property.
    Add the tooltip shape property, if it doesn't already exist
  3. Add your tooltip text into the tooltip text field and click Apply to save your tooltip.
    Enter the text for your tooltip in the shape properties dialog, then press apply to return to the draw.io editor

Delete a tooltip

  1. Edit the shape properties: select the shape or connector, then press press Ctrl+M on Windows or Cmd+M on macOS.
  2. Click the small cross to the right of the tooltip text to delete it.
    Edit the shape properties, then click the small cross to delete your tooltip
  3. Click Apply to return to the diagram editor.

Tip: Tooltips can contain placeholders (variables), which allow you to change the text based on the context of where the shape is in the diagram (within another shape) or how it is styled.

Learn how to work with placeholders