Answers.Body: <p>I finally figured this out. I was actually close. </p>
  
  <p>Here's the HTML that I use</p>
  
  <pre><code>&lt;div class="hud-wrapper hidden"&gt;
      &lt;div id="generate-pdf-form" class="form meta"&gt;
          &lt;form&gt;
  
              {% import "_includes/forms" as forms %}
  
              {{ forms.lightswitchField({
                   class: 'docraptorize-prod-lightswitch',
                   name: 'prod-pdf',
                   on: true
              }) }}   
  
              &lt;input type="submit" class="btn submit" value="{{ "Go!"|t }}"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is the corresponding JS</p>
  
  <pre><code>var $btn = $('#generate-pdf-hud'),
  $form = $('#generate-pdf-form');
  
  $btn.on('click',function(){
      var hud = new Garnish.HUD($btn, $form, {
          orientations: ['top', 'bottom', 'right', 'left']
      });
     return false;
  });
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-28T20:45:02.830Z
Answers.LastActivityDate: 2017-04-28T20:45:02.830Z
Answers.UserDisplayName: Andreas
Body: <p>I've written a custom plugin and added a custom button to the right panel of an entry page</p>
  
  <p><a href="https://i.sstatic.net/WWGfM.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/WWGfM.png" alt="Click on the red button should trigger a Garnish Hud"></a></p>
  
  <p>Now I'm trying to show a Garnish Hud if I click the red button (like the one when you re-index assets) </p>
  
  <p><a href="https://i.sstatic.net/cTOdc.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/cTOdc.png" alt="I want to re-create this tooltip hud"></a></p>
  
  <p>The content of the hud would be two radio buttons and a button which triggers a controller function. It should also show the progress bar and the success icon after the button was clicked (so basically the same behaviour as the assets indexing thing)</p>
  
  <p>I put this code in my plugin specific js file</p>
  
  <pre><code>var hud = new Garnish.HUD($('#generate-pdf'), 'test', {
          orientations: ['top', 'bottom', 'right', 'left'],
          hudClass: 'hud toolhud',
      });
  </code></pre>
  
  <p>But this shows the hud after page load and the trigger (that's the button with the id #generate-pdf) doesn't work at all.</p>
  
  <p>Can anyone point me in the right direction? </p>
  
Tags: <plugin-development><garnish><hud>
Title: How do I show a Garnish hud in the CP
ThreadText: # How do I show a Garnish hud in the CP
  
  (Asked by: username_0 on 2017-04-28)
  
  I've written a custom plugin and added a custom button to the right panel of an entry page
  
  [![Click on the red button should trigger a Garnish Hud](https://i.sstatic.net/WWGfM.png)](https://i.sstatic.net/WWGfM.png)
  
  Now I'm trying to show a Garnish Hud if I click the red button (like the one when you re-index assets)
  
  [![I want to re-create this tooltip hud](https://i.sstatic.net/cTOdc.png)](https://i.sstatic.net/cTOdc.png)
  
  The content of the hud would be two radio buttons and a button which triggers a controller function. It should also show the progress bar and the success icon after the button was clicked (so basically the same behaviour as the assets indexing thing)
  
  I put this code in my plugin specific js file
  
  ```
  var hud = new Garnish.HUD($('#generate-pdf'), 'test', {
          orientations: ['top', 'bottom', 'right', 'left'],
          hudClass: 'hud toolhud',
      });
  
  ```
  
  But this shows the hud after page load and the trigger (that's the button with the id #generate-pdf) doesn't work at all.
  
  Can anyone point me in the right direction?
  
  **Tags:** plugin-development, garnish, hud
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2017-04-28. Score: 4 | Accepted answer
  
  I finally figured this out. I was actually close.
  
  Here's the HTML that I use
  
  ```
  <div class="hud-wrapper hidden">
      <div id="generate-pdf-form" class="form meta">
          <form>
  
              {% import "_includes/forms" as forms %}
  
              {{ forms.lightswitchField({
                   class: 'docraptorize-prod-lightswitch',
                   name: 'prod-pdf',
                   on: true
              }) }}   
  
              <input type="submit" class="btn submit" value="{{ "Go!"|t }}">
          </form>
      </div>
  </div>
  
  ```
  
  and this is the corresponding JS
  
  ```
  var $btn = $('#generate-pdf-hud'),
  $form = $('#generate-pdf-form');
  
  $btn.on('click',function(){
      var hud = new Garnish.HUD($btn, $form, {
          orientations: ['top', 'bottom', 'right', 'left']
      });
     return false;
  });
  
  ```
  
  
  ---
  
  