Adding tooltips to key value fields

How do I?
#1

Hello, my app has a lot of data that needs to be displayed in a sort of key value fashion. The only problem is many of these fields need tooltips in order for the team to better understand the meaning behind the fields. The key value map component is convenient in layout but it does not seem like it supports tooltips on the columns. Is there a trick around this or has anyone discovered a good way to display a number of fields in a key, value fashion that also supports tooltips?

Thanks.

#2

Hi there,

The tooltip functionality currently isn’t built in for the key value map component - we will tag your post as a feature request for our engineering team.In the meantime, there is a workaround to create the key value map using listview and have tooltip show up for each of the key values (screenshot below). The steps are:

  1. Add the listview component on your Retool canvas,
  2. Click Inspect for the listview component and we'll need to set the "Number of Rows" box to the number of keys in the object you would display in the keyvalue map. In my case this is {{Object.keys(keyvaluemap1.data).length}} for testing,
  3. Toggle on "Dynamic heights", or a manual height of your chosing
  4. Add a Text component to the listview as the Key column and go to the "tooltip text" setting. We can have a dynamic tooltip for each value by selecting [i] from an array: {{["tooltip1","tooltip2","tooltip3"][i]}}. This is hard coded for my example.
  5. Add a second Text component for the Values- you would want to select the right key and value for each row in the text components Value setting. For keys: {{ Object.keys(YOUR_OBJECT)[i] }}, for values: {{ Object.values(YOUR_OBJECT)[i] }}
  6. More info on listviews here: https://docs.retool.com/docs/working-with-listviews

1866×1220 157 KB

1 Like