PopDrop is a beautifully simple PopOver and DropDown stack that makes conveying extra information simplicity itself. PopDrop makes popovers, dropdowns, tooltips and modal dialogs that look great.

My Image


Click to see examples.

Simple Setup

10 built in themes

Easy titles and styling

Lots of size and positioning options

Drop zone for any stack content

PopDrop works with any theme.

PopDrop in RapidWeaver Edit Mode

Smart Positioning

PopDrop will position itself to ensure that it appears within the viewable screen.
By selecting one of the auto positions it will appear either above or below the link dependent on scroll position.

There is even a setting to contain dropdowns to the width of the link or button that you are using to open them. This makes for easy set up and neat looking menus.

My Image



There are 5 themes with 2 variants of each - normal and flat.

The flat themes have no shadows or decoration.


Switch to custom and you can personalize every colour line and shadow to your liking.


There are 5 themes with 2 variants of each - normal and flat.

The flat themes have no shadows or decoration.


Switch to custom and you can personalize every colour line and shadow to your liking.

My Image
My Image

Custom Styles

In custom mode you can choose individual colors and styles for every element of the Pop Drop.

Because the Pop Drop panel is a child stack you can easily copy your custom panels between Pop Drop stacks.

Once setup, multiple uses with ease.


Mega Menus and Popovers

Choose the Mega width option and your PopDrops will occupy the full width of the screen.

You can even match the site max-width if required so your mega PopDrops don't get too wide on very large screens. This example demonstrates this feature.

Click for Mega Menu
Some Info

Anatidae paleo gastropro authentic flexitarian fixie tote bag, scenester.

Some Links
More Links


Multi-level PopDrops

You can launch a PopDrop from a link within another PopDrop.

This is ideal for making submenus and other simple navigation structures.

This example is set to Auto Vertical so that it will appear either above or below the button dependent on where the button is on the screen and the space available.

My Image



You can launch a PopDrop from anything that you can add a link to.

Simply add a link to some text or any other stack that you wish to click to show the PopDrop.

Add a custom attribute containing the PopDrop ID that you define in the stack settings.

The downloadable demo project shows examples of launching from Stacks buttons and text links.

Click for instructions

Foundation Users Only

NOTE: The Foundation button stack does not support data-attributes.

With Button Plus v1 you can use the Data Attribute setting to enter the pop-drop attributes.

With Button Plus 2 everything is automatic. No attributes or link data are needed at all.


Zero Setup LaunchingButtonPlus 2

For ButtonPlus v2 users there is a direct child stack integration and you don't need to set anything.

Just click the Stacks add child (+) button, add a PopDrop and it is automatically linked.

All you then need to do is to add your content to the PopDrop drop zone as normal.

Learn how to use PopDrop with ButtonPlus 2 here.

MagicGellan 2

Magic Zone stack can now be used to integrate PopDrop menus in addition to the previous Foundation Dropdown option.

PopDrop gives a much greater degree of control, works more easily and looks great as a dropdown or mega menu in MagicGellan 2.

My Image


TipList Mode

My Image

Manage all your tooltips for a page from within one stack.

Use Stacks Partials for site wide tooltips and popovers

Use colors, lists and HTML in your tips.

See the TipList Setup page for more information.

Links Styles Stack

My Image

The PopDrop Link Styles stack helps you style PopDrop tooltip links differently from normal links on the page.

See the Stack Setup page for how to use it.

My Image

Simply check the "This is a nested PopDrop" setting in your second level PopDrop.

My Image

This will prevent this PopDrop from closing its parent when it opens.

Closing the parent PopDrop will close all nested PopDrops

This popover is using the built in "light" theme and is showing the optional title bar and close gadget.
Pop Drops can contain any stacks that you like, you are not just limited to text.

This is a tooltip.

When is a PopDrop not a popover?

When its a modal dialog box.

PopDrop modals can contain any other stacks that you drop in, not just text.


1. Add a link to whatever you want to launch your Pop Drop (either text or another stack)

2. Change the link url to javascript:void(0)
This will prevent it adding a # to the page url as it would if you just used a blank # as the link)

3. Click the + button and add a Custom Attribute

4. Always enter data-pop-drop as the name

5. In the value field enter the PopDrop ID that you set in the PopDrop main stack settings.

My Image


PopDrop is another free stack from Big White Duck. It works in any theme but also has a special integration for the ButtonPlus 2 stack when used in Foundation.


Big White Duck. Stacks for RapidWeaver.