<a href="#popupBasic" data-rel="popup">Tooltip</a>

<div data-role="popup" id="popupBasic">
	This is a completely basic popup, no options set.
</div>

Close

Calling the popup plugin

This plugin will auto initialize on any page that contains a div with the attribute data-role="popup". However, if needed you can directly call the popup plugin on any selector, just like any jQuery plugin:

$('#myPopupDiv').popup();			

Theming the popup

Normally, the popup's theme will be set to align with the theme of the link that launches it. The above popup can be shown in multiple places. Each time, upon appearing, the popup's theme is set to match that of the link that launches it:

<a href="#popupTester" data-rel="popup" data-role="button" data-inline="true" data-theme="a">Pop</a>
<a href="#popupTester" data-rel="popup" data-role="button" data-inline="true" data-theme="b">Pop</a>
<a href="#popupTester" data-rel="popup" data-role="button" data-inline="true" data-theme="e">Pop</a>

The result: Pop Pop Pop

However, you can override this by setting the theme yourself. You can apply a theme separately to the popup itself and to its contents. To apply a theme to the popup itself, set the data-overlay-theme attribute to one of the swatches. For example, data-overlay-theme="a". To apply a theme to the contents of the popup, add the swatch of your choice via the data-theme attribute to the popup div. For example, data-theme="a". Here is an example of an explicitly themed popup:

<div data-role="popup" id="popupTesterThemed" data-overlay-theme="e" data-theme="a">
	<table>
		<tr><td>Mary</td><td>had-a</td><td>little</td><td>lamb</td></tr>
		<tr><td>And</td><td>it-was</td><td>white-as</td><td>snow</td></tr>
		<tr><td>Everywhere</td><td>that</td><td>Mary</td><td>went</td></tr>
		<tr><td>It</td><td>was</td><td>sure</td><td>to-go</td></tr>
	</table>
</div>
<a href="#popupTesterThemed" data-rel="popup" data-role="button" data-inline="true">Pop</a>

This is the result: