title: Insert custom element in CKEditor5
body: <p>In CKEditor5 I am creating a plugin to insert a <code>span</code> element to show a tooltip. The idea is to show a tooltip with a (foot)note inside of it while the element itself will display an incremental number. In CKEditor4 I made something like this with: </p>
  
  <pre><code>CKEDITOR.dialog.add( 'footnoteDialog', function( editor ) {
      return {
          title: 'Footnote Properties',
          minWidth: 400,
          minHeight: 100,
          contents: [
              {
                  id: 'tab-basic',
                  label: 'Basic Settings',
                  elements: [
                      {
                          type: 'text',
                          id: 'content',
                          label: 'Content of footnote',
                          validate: CKEDITOR.dialog.validate.notEmpty( "Footnote field cannot be empty." )
                      }
                  ]
              }
          ],
          onOk: function() {
              var dialog = this;
  
              var footnote = editor.document.createElement( 'span' );
              footnote.setAttribute('class', 'footnote');
              footnote.setAttribute('data-toggle', 'tooltip');
              footnote.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'content' ) );
              footnote.setText('[FN]');
  
              editor.insertElement( footnote );
          }
      };
  });
  </code></pre>
  
  <p><code>[FN]</code> would be transformed in an incremental number.  </p>
  
  <p>Now I try to make this plugin with in CKEditor5, but with no success. There are two issues I run in to. Fist, I can't manage to insert the element inside the text. Second, when I want to use the attribute <code>data-toggle</code> this doesn't work because of the <code>-</code> syntax. This is my current code: </p>
  
  <pre><code>import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  import pilcrowIcon from '@ckeditor/ckeditor5-core/theme/icons/pilcrow.svg';
  import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  
  export default class Footnote extends Plugin {
      init() {
          const editor = this.editor;
  
          editor.ui.componentFactory.add( 'footnote', locale =&gt; {
              const view = new ButtonView( locale );
  
              view.set( {
                  label: 'Insert footnote',
                  icon: pilcrowIcon,
                  tooltip: true
              } );
  
              view.on( 'execute', () =&gt; {
                  const source = prompt( 'Footnote' );
  
                  editor.model.schema.register( 'span', { allowAttributes: ['class', 'data-toggle', 'title'] } );
  
                  editor.model.change( writer =&gt; {
  
                  const footnoteElement = writer.createElement( 'span', {
                      class: 'footnote',
                      // data-toggle: 'tooltip',
                      title: source
                  });
  
                  editor.model.insertContent( footnoteElement, editor.model.document.selection );
              } );
          } );
  
              return view;
          } );
      }
  }
  </code></pre>
  
  <p>How can I make sure my <code>span</code> element is inserted and also contains <code>data-toggle="tooltip"</code>? </p>