Skip to main content

Tooltips

Tooltips can be added to field in order to add help to the user that will fill the form. The tooltip is displayed when the user hover the field. The tooltip is displayed in a popover. When the tooltip is defined an icon appears next to the label and the user can hover on it to display the tooltip.

Simple​

{
  "first_name": {
    "label": "First name",
    "component": "text",
    "tooltip": "This is the first name of the person"
  }
}

The tooltip is a string like any strings in the form, it can be a translation key or a simple string. It works like a classic text in the form, that is defined in the text section.

Tooltip content from external​

{
  "text_input_with_specific_tooltip": {
    "component": "text",
    "label": "Specific tooltip",
    "tooltipFormat": "raw",
    "tooltip": {
      "from": "tooltip_with_specific_characters"
    }
  }
}

Large and extra large content​

When the content of the tooltip is large or above, the tooltip has a maximum width and its content is scrollable.

{
  "giant_tooltip_content": {
    "component": "text",
    "tooltip": "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.\n\nCras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.\n\nCras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.\n\nCras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.\n\nCras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.",
    "label": "Giant tooltip input",
    "inline": false
  },
  "large_tooltip_content": {
    "component": "text",
    "tooltip": "<table style=\"border: 1px solid black;\"><tr style=\"border: 1px solid black;\"><td style=\"border: 1px solid black;\">test</td><td style=\"border: 1px solid black;\">test</td><td style=\"border: 1px solid black;\">test</td><td style=\"border: 1px solid black;\">test</td><td style=\"border: 1px solid black;\">test</td><td style=\"border: 1px solid black;\">test</td><td style=\"border: 1px solid black;\">test</td><td style=\"border: 1px solid black;\">test</td><td style=\"border: 1px solid black;\">test</td><td style=\"border: 1px solid black;\">test</td><td style=\"border: 1px solid black;\">test</td><td style=\"border: 1px solid black;\">test</td><td style=\"border: 1px solid black;\">test</td><td style=\"border: 1px solid black;\">test</td></tr></table>",
    "label": "Large tooltip input",
    "inline": false
  }
}

Storybook example​

Tooltip#