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

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

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?

1 Answer 1


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">

            {% 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 }}">

and this is the corresponding JS

var $btn = $('#generate-pdf-hud'),
$form = $('#generate-pdf-form');

    var hud = new Garnish.HUD($btn, $form, {
        orientations: ['top', 'bottom', 'right', 'left']
   return false;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.