# dynamic-popup

> DynamicPopup relocates itself depending on the viewport's bounds.

Latest version **1.3.4** (published 2015-10-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install dynamic-popup
pnpm add dynamic-popup
yarn add dynamic-popup
bun add dynamic-popup
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.4 |
| Published | 2015-10-10 |
| First published | 2015-09-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | splash |
| Keywords | popup, tooltip |

## Links

- npm: https://www.npmjs.com/package/dynamic-popup
- Repository: https://github.com/Splash-Inc/dynamic-popup
- Homepage: https://github.com/Splash-Inc/dynamic-popup#readme
- Issues: https://github.com/Splash-Inc/dynamic-popup/issues
- npm.io page: https://npm.io/package/dynamic-popup

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.3.4 (latest) — 2015-10-10
- 1.3.3 — 2015-10-04
- 1.3.2 — 2015-10-04
- 1.2.2 — 2015-10-04
- 1.2.1 — 2015-10-04
- 1.2.0 — 2015-10-04
- 1.1.1 — 2015-10-03
- 1.1.0 — 2015-10-03
- 1.0.7 — 2015-09-30
- 1.0.6 — 2015-09-29
- 1.0.5 — 2015-09-29
- 1.0.4 — 2015-09-29
- 1.0.3 — 2015-09-29
- 1.0.2 — 2015-09-29
- 1.0.1 — 2015-09-29
- … 1 more at https://npm.io/package/dynamic-popup/versions

## README

# Dynamic Popup

A tooltip with a fully customizable content and style. It's triggered by click
event on the target you specify. It'll relocate itself if it overflows the user's
viewport.

[Live Demo](http://codepen.io/pavlovsk/pen/epBKeK)

## Usage

You can install the package with NPM.
`npm i dynamic-popup`

Or just download the minified file.

After downloading files,

```js
var DynamicPopup = require('dynamic-popup')
```

or

```js
define(['path/to/dynamic-popup'], /*...*/)
```

or

```
<script type='text/javascript' src='path/to/dynamic-popup.min.js' />
```

and

```js
new DynamicPopup({
  el: document.getElementById('example-target'),
  content: '<p>hello</p>',
  className: 'my-example-popup',
  direction: 'right'
})

```

## Options

`el` and `content` are the only required parameters to get DynamicPopup properly work.
It has also some handy options.

`el`: Target element. When clicked, DynamicPopup will appear.

`content`: What will appear in popup. Can be any markup code.

`className | optional`: This can be either a string or an array of className strings.
You will have individual CSS selectors for each of them. e.g:

```js
DynamicPopup({
 // ...
 className: ['my-example-popup', 'my-info-popup']
 // ...
})
```

```css
.my-example-popup {/*...*/}
.my-example-popup__content {/*...*/}
.my-example-popup__chevron {/*...*/}

.my-info-popup {/*...*/}
.my-info-popup__content {/*...*/}
.my-info-popup__chevron {/*...*/}
```

`direction | optional`: What direction popup will appear to.
Can be 'top', 'left', 'right', 'bottom'. Default: 'bottom'.

`prefetch | optional`: If enabled, any external sources found in content will be
fetched before popup is visible. Can be used to enhance experience. Default: false

## Styling
DynamicPopup comes with little styling. It provides a set of CSS selectors that 
you can rely on when styling your popups. See demo for styling examples.

You can override default popup style.

```css
.dynamic-popup {/*...*/}
.dynamic-popup__content {/*...*/}
.dynamic-popup__chevron {/*...*/}
```

You can override a specific popup

```css
.my-example-popup {/*...*/}
.my-example-popup__content {/*...*/}
.my-example-popup__chevron {/*...*/}
```

## Notes

### .destroy()
DynamicPopup will destroy itself when clicked outside of popup but you may want
to destroy it yourself in some circumstances. In such cases, you can use:

```js
var myPopup = new DynamicPopup(/*...*/)

myPopup.destroy()
```

This will remove popup and its bindings from DOM.

---
_Source: https://npm.io/package/dynamic-popup · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._