title: WordPress > Gutenberg > How to add Popover to custom format type?
body: <p>I want to extend the WordPress (Gutenberg) default block
  <strong>Paragraph</strong> to give editors the possibility to add tooltips without writing code.</p>
  <p>Goal:</p>
  <ul>
  <li>Add block <strong>paragraph</strong> and add some text</li>
  <li>Make a <strong>text selection</strong> and click on a (new) button (should appear next to text styles)</li>
  <li>Tooltip button should work exactly like the <strong>link</strong> button, only that it should be possible to <strong>enter text</strong> instead of a link</li>
  </ul>
  <p>Working:</p>
  <ul>
  <li>I added a button (Text-Style)</li>
  <li>I can select text and I can add a class (.kf-tooltip)</li>
  <li>I know how to add a Tooltip via JS</li>
  </ul>
  <p>Missing:</p>
  <ul>
  <li>How to add the Popover to enter the text for the tooltip</li>
  <li>How to store / save this data</li>
  <li>How to output this data as attribute (for example: data-tooltip=&quot;Lorem ipsum&quot;)</li>
  </ul>
  <p>Any help would be awesome!</p>
  <hr />
  <p><strong>WordPress Plugin</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  /*
  Plugin Name: KF Custom
  */
  
  add_action( 'enqueue_block_editor_assets', function () {
      wp_enqueue_script(
          'kf-custom-script',
          plugins_url( 'kf-custom-script.js', __FILE__ ),
          array('wp-blocks', 'wp-rich-text')
      );
  });
  
  add_action( 'enqueue_block_assets', function () {
      wp_enqueue_style( 'kf-custom-style', plugins_url( 'style.css', __FILE__ ) );
  });</code></pre>
  </div>
  </div>
  </p>
  <p><strong>kf-custom-script.js</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function(wp){
  
      console.log(wp);
  
      // Create Popover
      const { Popover } = wp.components;
  
      var MyCustomButton = function( props ) {
          return wp.element.createElement(
              wp.blockEditor.RichTextToolbarButton, {
                  icon: 'editor-code',
                  title: 'Tooltip',
                  onClick: function() {
                      console.log('Open Popup on this event');
                      props.onChange( wp.richText.toggleFormat(
                          props.value,
                          { type: 'my-custom-format/kf-tooltip' }
                      ) );
                  },
                  isActive: props.isActive,
              }
          );
      }
  
      var clickHandler = function( props ) {
          console.log('Open Popup on this event');
          return 'test';
      } 
  
      wp.richText.registerFormatType(
          'my-custom-format/kf-tooltip', {
              title: 'Tooltip',
              tagName: 'span',
              className: 'kf-tooltip',
              edit: MyCustomButton,
              click: clickHandler
          }
      );
  
  })(window.wp)</code></pre>
  </div>
  </div>
  </p>