How do i create popover on a toolbar button in Firefox with extension

Question

I'm developing extension for firefox which needs to show popover with html document. In Safari and Chrome there is pretty straightforward way to create popover, but as for now i spent 2 days looking for a way to do the same thing in Firefox, but i could not find a page in documentation for doing that.

Can someone provide me with sample of code, link to tutorial or documentation i would be very grateful.

Here is the image of the popover in Safari

Answer 1

In a xul based addon, that can be accomplished with a panel. If you see the page for the type property of a panel, they have something similar to what you want.

What you would do is:

<toolbarpalette id="BrowserToolbarPalette">
      <toolbarbutton id="yourToolbarbutton"
                       image="chrome://yourExt/content/image.png"
                       class="toolbarbutton-1 chromeclass-toolbar-additional">
            <panel id="yourPanel"
                       type="arrow"
                       noautofocus="true"
                       consumeoutsideclicks="true"
                       onpopupshowing="functionToFillThePanel();"
                       level="top">

                   content goes here
             </panel>
     </toolbarbutton>
/toolbarpalette>

Answer 2

you can find this at this tutorials

https://developer.mozilla.org/en-US/docs/XUL/School_tutorial