Creating a custom Tooltip

It is easy to add a tooltip to any part of your product simply by using the Tooltip feature in Quest. First we’ll show how to style the tooltip design and afterwards we’ll show how to include it on a part of a custom component.

When applying the Tooltip feature to a custom component, Quest will use the MUI tooltip so to style it we’ll go to the full MUI Kit.

By finding it in the page “Tooltip” in Figma, we can start changing the style.

For instance, the color of the tooltip is coming from the Color Style of Other/Tooltip so it is easy to navigate there and edit the color that you want it to be directly.

Similarly, the font in the Tooltip is the Text Style from the design system called “Tooltip” so you can go there and make edits to the style to match your brand.

Additionally, you can follow the instructions and make changes to things like the drop-shadow, size and corner-radius.

When you’re done making your design edits, be sure to use the Quest plugin to sync the design system. Now whenever we use the “Tooltip” feature in Quest we’ll get the styling from the design.

Next we’ll add the feature in the Quest Editor. When you want to add a tooltip to a layer in the component, you simply need to click on the component you’d like to add it to, press the plus button to add a feature and choose “Tooltip”.

This will pop-up a few options. The first is a drop-down where you can choose either “Text” or “Component”.

Text can either be static or dynamic. For example, text can either be “My tooltip” or {props.tooltip} or {data.dialogInfo.tooltip}

For the Placement, you can choose which direction you want to prioritize the tooltip to appear. Your full option list are:

‘bottom-end’ | ‘bottom-start’ | ‘bottom’ | ‘left-end’ | ‘left-start’ | ‘left’ | ‘right-end’ | ‘right-start’ | ‘right’ | ‘top-end’ | ‘top-start’ | ‘top’

Basically this determines where the arrow will be placed on the component like is it on the start of the component, the middle or end.

However, because this is based on MUI, depending on where your component exists in the screen, sometimes the tooltip will shift placement as you can’t have a tooltip on the left of a component if the component is already all the way to the left of the screen so it will move to a placement that it can actually be read automatically.

For “Show Arrow”, your options are either “true” or “false”.

For components, you specify the nested component to use as a tooltip e.g. EmojiTooltip and then you can also specify props that are passed to this nested component. Refer to the nested components documentation for more details.