https://github.com/mattmoony/peekaboojs
A JavaScript plugin that enables you to display more information without taking up more space. Users simply need to hover over a certain text element to be presented with a stylish message. 🙈
https://github.com/mattmoony/peekaboojs
css easy framework hinting html info information javascript js peekaboo peekaboojs popup
Last synced: 3 months ago
JSON representation
A JavaScript plugin that enables you to display more information without taking up more space. Users simply need to hover over a certain text element to be presented with a stylish message. 🙈
- Host: GitHub
- URL: https://github.com/mattmoony/peekaboojs
- Owner: MattMoony
- License: mit
- Created: 2019-03-15T17:08:58.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-15T17:12:01.000Z (about 6 years ago)
- Last Synced: 2025-01-19T10:31:12.207Z (4 months ago)
- Topics: css, easy, framework, hinting, html, info, information, javascript, js, peekaboo, peekaboojs, popup
- Language: HTML
- Homepage: https://mattmoony.github.io/PeekabooJS/example
- Size: 331 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
    
# PeekabooJS
_Where's the info? There's the info!_
---
Add necessary information to your HTML-Elements. Watch the information magically appear in a little info-popup pointing to the element-in-question. It is an interesting way to gain the user's attention and give him additional intel.
## Installation
#### Script tag
```html
```
## Setup
No additional setup required. All you have to do is include the script in your HTML document.
## Usage
#### Parse all
In order to have a _peekaboo-popup_ appear, whenever a user hovers over a certain element, you just need to use the `` HTML tag around any text/element.
To specify the information that will show up, use the `info` attribute.
```html
Some random text.
However, I want you to know this!
```
Now, just creating the element doesn't create a popup just yet. However, all you need to do now, is, to call the `Peekaboo.parse()` function in your JavaScript code.
```javascript
// ...
Peekaboo.parse();
// ...
```
#### Parse children
If you decide to asynchronosly load content into your page, or for any other reason, you might only want to parse certain parts of the webpage. You can do this by just passing the parent element, whose children should be parsed, to the `Peekaboo.parse(parent)` function.
```html
something, something
Some random text.
However, I want you to
know this!
```
```javascript
// ...
Peekaboo.parse(document.getElementById('parent'));
// ...
```
#### Reposition
In order for the info-popups to always be in the right position, you should call the `Peekaboo.reposition()` which will re-align all, already created, _peeker_ elements.
```javascript
// ...
window.onresize = () => {
Peekaboo.reposition();
// ...
}
// ...
```
## Conclusion
For any further questions & suggestions, you can message me on [twitter](https://twitter.com/Matthia23184857).
---
_... Matthias M. (March, 2019)_