Add descriptions/Tooltips to custom components in the builder editor

Technical Questions
1

There are certain contexts I would like to pass on to our content team. Essentially reminders, but also cheap constraints. In airtable and salesforce I got into the habbit of putting helpful notes/reminders in the tool tips/field descriptions.

This has been great! People are reminded of certain things and essentially it becomes part of the documentation of the system. It also means you can invoke constraints without having to build them. For landing pages the classic one is images.

The 2 situations I have for it:

  • remind people what the ideal size/aspect ratio of the image should be: “suggested banner size: 1600pxX1000px”
  • remind designers they can add whitespace to the image if they want to create mare space around it (well maybe this is redundant in builder and they should instead use padding)

It would make sense if I could add this to the component schema next to the type

2

Hi @agentlewis! Thanks for reaching out.

To achieve this, you can use custom React components or symbols with inputs. For example, when you create a symbol with inputs, there is a text field where you can add helper text. When your team drags and drops the symbol onto the page, this is what they will see:

Screen Shot 2020-12-14 at 2.56.50 PM
Screen Shot 2020-12-14 at 2.56.50 PM2742×1480 657 KB

Let us know if you have any additional questions.

1 Like
3

Oh nice,

Ok 2 questions:

  • Can I add that to any field or only the Image field?
  • How do I do this with my custom react components - i dont see it in the docs?
4
  1. Yes, you can add helper text to any field
  2. To add helper text in your custom react components, you can use helperText. For example:
  name: 'Heading',
  inputs: [{ name: 'title', type: 'text', helperText: 'Some help regarding what to enter' }]
})
1 Like
5

Hey Maddy - do you have a published full spec of all the required/optional properties that can be used in the schema?

I feel like this is something like a props table: Button - Chakra UI

I am wondering if there are other hidden goodies I could be using.

6

@maddy happy new year. I just wanted to follow up and check if there was a schema resource available that defined all the props available to a field?

7

Hi @agentlewis! Sorry for the delayed response.

Yes, if you are talking about all inputs types you can refer this guide. If you talking about the schema of the object itself, you can refer to this.

1 Like
8

The second was what I was looking for - thanks so much!