├── LICENSE.md
├── README.md
├── marginotes.js
└── package.json
/LICENSE.md:
--------------------------------------------------------------------------------
1 | # The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Francisco Dans
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
9 | of the Software, and to permit persons to whom the Software is furnished to do
10 | so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # marginotes
2 | Marginotes takes your jQuery selection and adds notes to the margin with the text provided in HTML attributes. If you don't want to use jQuery, there's also a [version of marginotes](https://github.com/mshenfield/vanilla-marginotes) without it.
3 |
4 | ### Who's using it
5 | * [My website](http://francisco.dance).
6 | * [My buddy Carlos Matallín](http://matall.in/posts/vietnam/)
7 |
8 | ### Usage
9 |
10 | Marginotes works by adding a `desc` attribute to an HTML element, which will be displayed as a tooltip:
11 |
12 | ```html
13 | Bill Gates
14 | ```
15 |
16 | 
17 |
18 | ```javascript
19 | $("selector").marginotes(options)
20 | ```
21 |
22 | It works with links, as well as with `` elements:
23 |
24 | ```html
25 | Brión
26 | ```
27 |
28 | 
29 |
30 |
31 | ### Options
32 |
33 | *width*: sets the tooltip's width. Default is 100px.
34 |
35 | *field*: sets the html attribute to look for. Default is `desc`
36 |
37 | ### License
38 |
39 | Copyright (c) 2016 Francisco Dans
40 |
41 | Licensed under the MIT license, see `LICENSE.md` for more information.
42 |
--------------------------------------------------------------------------------
/marginotes.js:
--------------------------------------------------------------------------------
1 | (function (factory) {
2 | if (typeof define === 'function' && define.amd) {
3 | // AMD. Register as an anonymous module.
4 | define(['jquery'], factory);
5 | } else if (typeof module === 'object' && module.exports) {
6 | // Node/CommonJS
7 | module.exports = function( root, jQuery ) {
8 | if ( jQuery === undefined ) {
9 | // require('jQuery') returns a factory that requires window to
10 | // build a jQuery instance, we normalize how we use modules
11 | // that require this pattern but the window provided is a noop
12 | // if it's defined (how jquery works)
13 | if ( typeof window !== 'undefined' ) {
14 | jQuery = require('jquery');
15 | }
16 | else {
17 | jQuery = require('jquery')(root);
18 | }
19 | }
20 | factory(jQuery);
21 | return jQuery;
22 | };
23 | } else {
24 | // Browser globals
25 | factory(jQuery);
26 | }
27 | }(function ($) {
28 | $.fn.marginotes = function (options) {
29 | options = options || {}
30 | var field = options.field || 'desc'
31 | var spans = this.filter('span')
32 |
33 | $('body').append('')
34 | spans.css({
35 | 'border-bottom': '1px dashed #337ab7',
36 | 'cursor': 'help'
37 | })
38 | this.hover(function (e) {
39 | var description = $(this).attr(field)
40 | var parent = $(this.parentElement)
41 | var position = parent.position()
42 | var tooltip = $('.margintooltip')
43 | var width = Math.min(options.width || 100, position.left)
44 |
45 | if (width < 60 || !description) {
46 | return
47 | }
48 |
49 | tooltip
50 | .css({
51 | 'border-right': 'solid 2px #337ab7',
52 | 'font-size': '13px',
53 | 'left': position.left - width - 5,
54 | 'min-height': parent.height(),
55 | 'padding-right': '7px',
56 | 'position': 'absolute',
57 | 'text-align': 'right',
58 | 'top': position.top,
59 | 'width': width
60 | })
61 | .text(description)
62 | .stop()
63 | .fadeIn({
64 | duration:100,
65 | queue: false
66 | })
67 | }, function () {
68 | $('.margintooltip').stop()
69 | $('.margintooltip').fadeOut({
70 | duration: 100
71 | })
72 | })
73 | }
74 | }));
75 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "marginotes",
3 | "version": "0.1.0",
4 | "description": "Quick, cool margin notes with jQuery",
5 | "main": "marginotes.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/fdansv/marginotes.git"
12 | },
13 | "keywords": [
14 | "jquery-plugin",
15 | "ecosystem:jquery",
16 | "notes",
17 | "margin"
18 | ],
19 | "author": {
20 | "name": "Francisco Dans",
21 | "email": "fdansv@gmail.com",
22 | "url": "http://francisco.dance"
23 | },
24 | "license": "MIT",
25 | "bugs": {
26 | "url": "https://github.com/fdansv/marginotes/issues"
27 | },
28 | "homepage": "https://github.com/fdansv/marginotes#readme"
29 | }
30 |
--------------------------------------------------------------------------------