Stack Setup

Find out how the settings influence the appearance
and behavior of your PopDrops.

Nested PopDrops
Nested PopDrops are launched from a link within another PopDrop. Usually this is only used when making drop down menus.
Tip Styles
Style your PopDrop links so that they stand out from normal links on your page.
Pop Drop Stack
The main PopDrop stack
About Link Styler
This is a link styled using the PopDrop Link Styles stack and makes it clear to users that it has a different function.
ButtonPlus2 Integration
See the ButtonPlus2 Demo and Docs for more information.


To use PopDrop all you need to do is add your content, set the link and it works. PopDrop is really easy to use.

When you drop a PopDrop stack onto your page you will see that it comprises of two stack components.

My Image

The main (outer) stack, labelled "PopDrop" is the Main PopDrop Stack. It controls the launch ID and a few stack wide settings.

The inner stack is the PopDrop Content and contains the setup and styling for the actual popover / tooltip or dropdown that will appear on your page.

Why in 2 parts?

PopDrop Content is a child stack. You can therefore copy/paste or copy-drag content stacks between your PopDrop instances.

 Tip: This is a huge time saver as you don't need to laboriously replicate your custom style settings. Just copy it across and then drop in some different content.

PopDrop Content can be added to a ButtonPlus 2 stack without using the parent PopDrop stack. This allows for zero setup linking of the button to the content. You don't need to set anything up to make it work other than drop in some content for your PopDrop


Collapse In Edit Mode

Simply allows all your content to be hidden in edit mode just leaving the PopDrop name and link information.

PopDrop Mode

Switch between normal PopDrop and TipList mode.

Lauch ID

This is the most important setting in any PopDrop. It is the unique ID that you use to tell a link to open this PopDrop.

Launch ID's should be only alphanumeric characters. Keep them simple and descriptive.

Allow Multiple Triggers

In the unlikely event that you want to launch the same PopDrop from more than one link then you should enable this setting.

As the note describes, you cannot use nested PopDrops when this setting is enabled.

My Image
Tip Helper Mode

Selecting this option will float your list of ToolTips at the top of your edit mode screen. This is great for setting up the links and tooltip content for a page as you don't need to continually scroll up and down between your links and the PopDrop stack.

TipList Helper

Click for more information

Tip Helper Mode


The Tip List is floated in the edit mode window at either the top or bottom.

You can quickly add Tips, check the Tip Names and alter content while the links that they refer to are in view. No scrolling up and down is required.

Learn more about using TipLists


Basic Setup

Collapse In Edit Mode

Hide your content in edit mode to save space.


Choose to display as either a DropDown / Popover or a Modal dialog.

Open On

The PopDrop can be shown by either clicking or hovering on the link. On touch screens click will always be used.


You can either use a Pop, a Fade, or no animation when the PopDrop appears.

My Image


PopDrops can appear in various positions relative to the link that triggers them.

The Auto settings are most useful and will ensure that the PopDrop appears within the viewable area of the screen.

You can force the PopDrop to appear Above or Below by not using the Auto settings.

Custom Width

With simple content you do not need to set a width. PopDrops will automatically size themselves to the content.

If, however you add content with columns or other layout elements it is necessary to adjust the maximum allowed width to prevent them from appearing full width.

The default max-width works well for most such situations.

Contained Width

This will contain the width of the PopDrop to the same width as the element that it is launched from.

This is particularly useful if you want to make a dropdown menu that is launched from a button.

Mega Width

Mega width PopDrops will take up the full width of the browser and allow you to make mega menus.

You can also apply a max-width if you want your mega dropdowns to be contained to the width of your site content for wide screens.

My Image


You can choose from 10 ready made themes for your PopDrops or use a Custom Style.

Themes will also automatically color your content text where possible. The dark theme will make text a light color and vice versa. You can override this behavior by simply setting a color on your text as normal.

Custom Styles allow you to set up every aspect of the PopDrop to your liking.


Pad the content area of the PopDrop to give a little space around its edges and improve the appearance.

Tip Arrow

You can turn off the Tip Arrow if required. This is useful when making dropdown menus.

Modal dialogs will always remove the Tip Arrow automatically.

My Image

Header Bar

Optionally display a header bar inside your PopDrop with a title in it.


When selected, the PopDrop will display a close button in the top right hand corner.

My Image


These are the settings that you don't normally need to touch but are there for those who like to tweak things.

Nested PopDrops

If you are building a multi-level PopDrop dropdown menu then you should enable this feature.

When selected, the PopDrop will not close its parent PopDrop when opened. Closing the parent will close all its nested child PopDrops.

My Image

You can close all open PopDrops from any element (even a link within a PopDrop by using these custom classes or data attributes.

An example where this may be useful is when using a form cancel button within a PopDrop






Prevent PopDrop Link Styles being applied to a link using this class.

This is sometimes necessary if you have a link to a submenu that opens another PopDrop.





PopDrops are triggered from links, just the same as links to other pages or sites.

To help users distinguish between tooltips and normal links, you can use the Pop Drop Link Styles stack to give a different look to PopDrop links.

My Image

You can choose to apply custom styles to the colors, the link underline and the cursor shown when the PopDrop links are hovered.

By way of example, this is a normal page link and is shown in the pink color chosen for this site.

Here is a PopDrop Link which has been styled using the Link Styles stack on this page with the settings as shown. when this setting is enabled.

Excluding Links

If you need to exclude a particular pop drop link from being affected by the Link Styles just give is a class of pop-nostyle in the link dialog.

My Image
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.