Adding images to tooltips

Lets explore how you can add images to your tool tips

Updated over a week ago

Every element within Team Forms offers a high degree of customization, including the option to incorporate tooltips that provide supplementary information when a user hovers over a question. This feature also supports adding images and links to your tool tips. To achieve this, Team Forms provides a convenient feature that empowers you to seamlessly insert HTML content in various parts of your forms including the tooltip

By following the steps below you can insert an image into your tooltip:

  1. Open the setting for the component with the tooltip

  2. locate the tooltip settings and add in the following html:

    <img width="100" src="insert image urm" />

    In the above html you need replace the src field with a public url to your image. However for many organisations it can be difficult to get a reliable public url for there internal images. In this case we recommend using this base64-image webside to convert the image into a url string. Using this method your final HTML should look somthing like:

    <img width="100" src="data:image/png;base64,generated image string" />

Did this answer your question?