Formio: How can I add a tooltip to a html element?

Question

I am using the formio renderer to display a form in an angular app. I pass a json-object to the formio directive. Now I am trying to place at tooltip to a component. To a textfield it is no problem:

        {
            "label": "Text Field",
            "tooltip": "This is a tooltip",
            "tableView": true,
            "key": "textField",
            "type": "textfield",
            "input": true
        }

But I don't know what is the proper way to do it on a html-element or a header for a table. My purpose is to have tooltips on the header elements of a table. As work around for a html element I tried this. But I wonder if there is a better way.

       {
            "content": "a little text"+ " <i class="fa fa-question-circle text-muted" ref="tooltip"></i><span class="tooltip"</span>',
            "type": "htmlelement",
            "tooltip": "myhtml tooltip"
        }

Answer 1

To add a tooltip for html elements, first we need to update the editform for html element to add a tooltip field.

import { Components } from 'angular-formio';

ngOnInit() { 
.....

 const htmlForm = Components.components.htmlelement.editForm();
    Components.components.htmlelement.editForm = () => {
      htmlForm.components[0].components[0].components[12] = {
          type: 'textarea',
          input: true,
          key: 'tooltip',
          label: 'Tooltip',
          placeholder: 'To add a tooltip to this field, enter text here.',
          tooltip: 'Adds a tooltip to the side of this field.',
          editor: 'ace',
          as: 'html',
          wysiwyg: {
            minLines: 3,
            isUseWorkerDisabled: true,
          },
        };
      return htmlForm;
    };

}

and in renderer component, import this :

import { Templates } from 'formiojs';

at the end of the file add this :

    Templates.current.html.form = `<{{ctx.tag}} class="formio-component-htmlelement {{ ctx.component.className }}" ref="html"
{% ctx.attrs.forEach(function(attr) { %}
  {{attr.attr}}="{{attr.value}}"
{% }) %}
>
{{ctx.t(ctx.content)}}{% if (!ctx.singleTags || ctx.singleTags.indexOf(ctx.tag) === -1) { %}
{% if (ctx.component.tooltip) { %}
<i ref="tooltip" tabindex="0" class="ml-2 {{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{ctx.component.tooltip}}"></i>
{% } %}
</{{ctx.tag}}>

{% } %}`;