├── .npmignore
├── .gitignore
├── template.html
├── template.js
├── Makefile
├── component.json
├── History.md
├── package.json
├── Readme.md
├── index.js
└── test
    └── index.html


/.npmignore:
--------------------------------------------------------------------------------
1 | test
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | test/*.js
3 | test/*.css
4 | components
5 | build
6 | 


--------------------------------------------------------------------------------
/template.html:
--------------------------------------------------------------------------------
1 | <div class="popover-wrapper">
2 |   <span class="popover-title"></span>
3 |   <div class="popover-content"></div>
4 | </div>


--------------------------------------------------------------------------------
/template.js:
--------------------------------------------------------------------------------
1 | module.exports = '<div class="popover-wrapper">\n  <span class="popover-title"></span>\n  <div class="popover-content"></div>\n</div>';


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | 
 2 | build: index.js template.js components
 3 | 	@component build --dev
 4 | 
 5 | template.js: template.html
 6 | 	@component convert $<
 7 | 
 8 | components:
 9 | 	@component install  --dev
10 | 
11 | clean:
12 | 	rm -fr build components
13 | 
14 | .PHONY: clean
15 | 


--------------------------------------------------------------------------------
/component.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "popover",
 3 |   "description": "Popover component",
 4 |   "version": "1.1.0",
 5 |   "keywords": ["toolpopover", "popover", "ui"],
 6 |   "dependencies": {
 7 |     "component/tip": "*",
 8 |     "component/query": "*",
 9 |     "component/inherit": "0.0.3"
10 |   },
11 |   "development": {
12 |     "component/aurora-popover": "*"
13 |   },
14 |   "scripts": ["index.js", "template.js"]
15 | }
16 | 


--------------------------------------------------------------------------------
/History.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 1.1.0 / 2014-03-22
 3 | ==================
 4 | 
 5 |  * remove jquery dependency, allow html nodes as content
 6 |  * bringing up-to-speed with latest tip updates
 7 | 
 8 | 1.0.1 / 2013-05-27 
 9 | ==================
10 | 
11 |  * pin deps
12 |  * add package.json back
13 | 
14 | 1.0.0 / 2013-02-22 
15 | ==================
16 |  
17 |   * fix inheritance for IE
18 | 
19 | 0.0.2 / 2012-07-05 
20 | ==================
21 | 
22 |   * fix dialog.effect support
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "democracyos-popover",
 3 |   "description": "Popover component",
 4 |   "version": "1.1.0",
 5 |   "keywords": ["popover", "component"],
 6 |   "bugs": {
 7 |     "url": "https://github.com/DemocracyOS/popover.git/issues"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/DemocracyOS/popover.git"
12 |   },
13 |   "dependencies": {
14 |     "democracyos-tip": "^2.4.1",
15 |     "component-query": "*",
16 |     "component-inherit": "0.0.3",
17 |     "stringify": "^3.1.0"
18 |   },
19 |   "browserify": {
20 |     "transform": [
21 |       "stringify"
22 |     ]
23 |   },
24 |   "browser": {
25 |     "tip": "democracyos-tip",
26 |     "query": "component-query",
27 |     "inherit": "component-inherit"
28 |   },
29 |   "component": {
30 |     "scripts": {
31 |       "popover/index.js": "index.js",
32 |       "popover/template.js": "template.js"
33 |     }
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Popover
 3 | 
 4 |   Popover component built on top of [Tip](http://github.com/component/tip).
 5 | 
 6 |   ![js popover component](http://f.cl.ly/items/282X271J2Y1s1P342o02/Screen%20Shot%202012-08-02%20at%205.07.07%20PM.png)
 7 | 
 8 | ## Installation
 9 | 
10 | ```
11 | $ npm install popover-component
12 | ```
13 | 
14 | ## Features
15 | 
16 |   - events for composition
17 |   - "auto" positioning
18 |   - fluent API
19 |   - minimal base styling
20 | 
21 | ## API
22 | 
23 | ### new Popover(content, [title])
24 | 
25 |   Create a new popover with `content` being
26 |   either a string, html, or element, and optional
27 |   `title` which may contain html or be an element as well.
28 | 
29 | ```js
30 | var Popover = require('popover');
31 | var popover = new Popover('You have mail!!!', 'Mail');
32 | popover.show('#avatar');
33 | ```
34 | 
35 |  View [Tip](http://github.com/component/tip) for additional
36 |  API documentation.
37 | 
38 | ## Themes
39 | 
40 |   - [Aurora](https://github.com/component/aurora-popover)
41 | 
42 | ## License
43 | 
44 |   MIT


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Module dependencies.
 3 |  */
 4 | 
 5 | var Tip = require('tip')
 6 |   , q = require('query')
 7 |   , inherit = require('inherit');
 8 | 
 9 | /**
10 |  * Expose `Popover`.
11 |  */
12 | 
13 | module.exports = Popover;
14 | 
15 | /**
16 |  * Initialize a `Popover` with the given `content`
17 |  * and optional `title`.
18 |  *
19 |  * @param {Mixed} content
20 |  * @param {Mixed} title
21 |  * @api public
22 |  */
23 | 
24 | function Popover(content, title) {
25 |   Tip.call(this, require('./template'));
26 |   this.classname = 'popover';
27 |   this.classes.add('popover');
28 |   if (title) this.title(title);
29 |   else this.hideTitle();
30 |   this.content(content);
31 |   if (Popover.effect) this.effect(Popover.effect);
32 | }
33 | 
34 | /**
35 |  * Inherits from `Tip.prototype`.
36 |  */
37 | 
38 | inherit(Popover, Tip);
39 | 
40 | /**
41 |  * Replace `content`.
42 |  *
43 |  * @param {Mixed} content
44 |  * @return {Popover}
45 |  * @api public
46 |  */
47 | 
48 | Popover.prototype.content = function(content){
49 |   var contentEl = q('.popover-content', this.el);
50 |   if (typeof content === 'string')
51 |     contentEl.innerHTML = content;
52 |   else
53 |     contentEl.appendChild(content);
54 |   return this;
55 | };
56 | 
57 | /**
58 |  * Change `title`.
59 |  *
60 |  * @param {String} title
61 |  * @return {Popover}
62 |  * @api public
63 |  */
64 | 
65 | Popover.prototype.title = function(title){
66 |   var titleEl = q('.popover-title', this.el);
67 |   if (typeof title === 'string')
68 |     titleEl.innerHTML = title;
69 |   else
70 |     titleEl.appendChild(title);
71 |   return this;
72 | };
73 | 
74 | /**
75 |  * Hide the title.
76 |  *
77 |  * @return {Popover}
78 |  * @api private
79 |  */
80 | 
81 | Popover.prototype.hideTitle = function(){
82 |   var titleEl = q('.popover-title', this.el);
83 |   titleEl.parentNode.removeChild(titleEl);
84 |   return this;
85 | };
86 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE 5>
 2 | <html>
 3 |   <head>
 4 |     <title>Popover</title>
 5 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 |     <link rel="stylesheet" href="../build/build.css" />
 7 |     <style>
 8 |       body {
 9 |         padding: 60px;
10 |         font: 300 14px "Helvetica Neue", Helvetica, Arial;
11 |         min-height: 1000px;
12 |       }
13 |       a {
14 |         display: inline-block;
15 |         float: left;
16 |         border: 1px solid #eee;
17 |         padding: 10px;
18 |         color: black;
19 |         text-decoration: none;
20 |         margin: 55px;
21 |         width: 100px;
22 |         text-align: center;
23 |       }
24 |       .tip-inner {
25 |         background-color: black;
26 |       }
27 |     </style>
28 |   </head>
29 |   <body>
30 |     <title>Popover</title>
31 |     <script src="../build/build.js"></script>
32 |     <a href="#" id="top">Top</a>
33 |     <a href="#" id="right">Right</a>
34 |     <a href="#" id="left">Left</a>
35 |     <a href="#" id="bottom">Bottom</a>
36 |     <a href="#" id="markup">Markup</a>
37 |     <a href="#" id="auto">Auto</a>
38 |     <script>
39 |       var q = require('component-query');
40 |       var Popover = require('popover');
41 |       Popover.effect = 'fade';
42 | 
43 |       [].slice.call(q.all('#top,#right,#left,#bottom')).forEach(function(el){
44 |         var tip = new Popover('Some popover content', el.textContent);
45 |         tip.position(el.textContent.toLowerCase());
46 |         el.addEventListener('mouseenter', function(){
47 |           tip.show(el);
48 |         });
49 |         el.addEventListener('mouseleave', function(){
50 |           tip.hide(200);
51 |         });
52 |       })
53 | 
54 |       var tip = new Popover('<input type="search" placeholder="Search" />', 'Search');
55 |       tip.position('top');
56 |       var markup = q('#markup');
57 |       markup.addEventListener('mouseenter', function(){
58 |         tip.show(markup);
59 |       });
60 |       markup.addEventListener('mouseleave', function(){
61 |         tip.hide(200);
62 |       });
63 | 
64 |       var auto = new Popover('You have messages!', 'Title');
65 |       auto.show('#auto');
66 |     </script>
67 |   </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------