custom/dynamic tooltip title for Fields and Option Lists

[adriane-slalom]

Is there a way to set a dynamic tooltip title on a Field? The array of fields I’m sending in have a description key, and I’d like to use that as the tooltip title instead of the generic “Fields” set by QueryBuilder. I can set a static string using the translations prop, but is there a way to do something like this instead, using each Field’s unique description (or title, whatever the prop needs to be called)?

 translations={{
                fields: {
                  title: (field: Field) => field.description || 'Field',
                },      
              }}

screenshot of the tooltip that I’m referencing with a static string that I don’t want:

Similarly, is there a way to add a dynamic tooltip (or a “secondary” type text description like this
) on the list of Field options?

[jakeboone02]

That does sound like a good idea, but no, the tooltips aren't dynamic like that. I think what I'd probably recommend is wrapping the default fieldSelector component (ValueSelector) like below.

Working sandbox here: https://codesandbox.io/p/devbox/jg7tg4?file=%2Fsrc%2FApp.tsx%3A36%2C1-45%2C1

const FieldSelector = (props: FieldSelectorProps) => (
  <ValueSelector
    {...props}
    title={
      (getOption(props.schema.fields, props.value!)?.description as string) ??
      props.title
    }
  />
);

The answer is really the same to your other question, too: Override the component and render whatever you need.

[adriane-slalom]

Awesome, thanks for your help, that's exactly what I wanted!
I'm still not quite sure how to override the OptionsList/MenuList component within the ValueSelector to display a tooltip or secondary text, however.